<template>
  <div>URL.createObjectURL、Blob 實(shí)現(xiàn)保存文件</div>
  <button ref="btnRef">下載</button>
</template>
?
<script setup lang='ts'>
import {onMounted, ref} from 'vue'
?
let btnRef = ref()
let fileUrl = ''
?
onMounted(()=>{
    btnRef.value.addEventListener('click',()=>{
    let str = '這里時(shí)要保存的文字內(nèi)容'
    const blobVal = new Blob([str],{type:'text/plain'})
    console.log(blobVal);
?
    // 創(chuàng)建了一個(gè)blob 的地址
    fileUrl = URL.createObjectURL(blobVal)
    console.log(fileUrl);
        
?
    let aDom = document.createElement('a')
    // 第一種寫法
    // aDom.setAttribute('href',fileUrl)
    // aDom.setAttribute('download','導(dǎo)出文件.txt')
    // 第二種寫法
    aDom.href = fileUrl
    aDom.download = '導(dǎo)出文件.txt'
    aDom.click()
    URL.revokeObjectURL(fileUrl)
    
?
    })
})
?
</script>
<style scoped lang='less'>
</style>