JavaScript中URL.createObjectURL和Blob實現(xiàn)保存文件

更新時間：2025年07月17日 10:23:43 作者：Mr.怪獸

本文介紹了利用JavaScript中的Blob對象和URL.createObjectURL方法在瀏覽器端創(chuàng)建文件并實現(xiàn)下載功能,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧

1.實現(xiàn)原理

生成blob對象，再使用URL.createObjectURL() 創(chuàng)建一個非跨域的數(shù)據(jù)源，然后在頁面寫入a標簽支持下載。

Blob表示二進制類型的大對象，通常是影像、聲音或多媒體文件0。

通過URL.createObjectURL(blobVal) 獲取要保存的文件的一個URL，這個URL帶hash，保存在內(nèi)存中。

通過URL.revokeObjectURL()來釋放這個object URL，通知瀏覽器不再繼續(xù)引用這個文件

跨域文件下載處理方法：

download 就是跨域的問題，如果加載了非同源的內(nèi)容，該屬性會失效不能下載，只會在瀏覽器中導航到該內(nèi)容。
在服務(wù)器設(shè)置 Content-Disposition 使用HTTP響應(yīng)頭 Content-Disposition 進行處理。
先下載源數(shù)據(jù)文件，生成blob對象，再使用URL.createObjectURL()創(chuàng)建一個非跨域的數(shù)據(jù)源，然后在頁面寫入a標簽支持下載。

2.代碼實現(xiàn)

<template>
  <div>URL.createObjectURL、Blob 實現(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 = '這里時要保存的文字內(nèi)容'
    const blobVal = new Blob([str],{type:'text/plain'})
    console.log(blobVal);
?
    // 創(chuàng)建了一個blob 的地址
    fileUrl = URL.createObjectURL(blobVal)
    console.log(fileUrl);
        
?
    let aDom = document.createElement('a')
    // 第一種寫法
    // aDom.setAttribute('href',fileUrl)
    // aDom.setAttribute('download','導出文件.txt')
    // 第二種寫法
    aDom.href = fileUrl
    aDom.download = '導出文件.txt'
    aDom.click()
    URL.revokeObjectURL(fileUrl)
    
?
    })
})
?
</script>
<style scoped lang='less'>
</style>

3.結(jié)果顯示

到此這篇關(guān)于JavaScript中URL.createObjectURL和Blob實現(xiàn)保存文件的文章就介紹到這了,更多相關(guān)URL.createObjectURL和Blob保存文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: