JavaScript中URL.createObjectURL和Blob實(shí)現(xiàn)保存文件
更新時(shí)間：2025年07月17日 10:23:43 作者：Mr.怪獸
本文介紹了利用JavaScript中的Blob對(duì)象和URL.createObjectURL方法在瀏覽器端創(chuàng)建文件并實(shí)現(xiàn)下載功能,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.實(shí)現(xiàn)原理
生成blob對(duì)象，再使用URL.createObjectURL() 創(chuàng)建一個(gè)非跨域的數(shù)據(jù)源，然后在頁(yè)面寫入a標(biāo)簽支持下載。
Blob表示二進(jìn)制類型的大對(duì)象，通常是影像、聲音或多媒體文件0。
通過(guò)URL.createObjectURL(blobVal) 獲取要保存的文件的一個(gè)URL，這個(gè)URL帶hash，保存在內(nèi)存中。
通過(guò)URL.revokeObjectURL()來(lái)釋放這個(gè)object URL，通知瀏覽器不再繼續(xù)引用這個(gè)文件
跨域文件下載處理方法：
- download 就是跨域的問(wèn)題，如果加載了非同源的內(nèi)容，該屬性會(huì)失效不能下載，只會(huì)在瀏覽器中導(dǎo)航到該內(nèi)容。
- 在服務(wù)器設(shè)置 Content-Disposition 使用HTTP響應(yīng)頭 Content-Disposition 進(jìn)行處理。
- 先下載源數(shù)據(jù)文件，生成blob對(duì)象，再使用URL.createObjectURL()創(chuàng)建一個(gè)非跨域的數(shù)據(jù)源，然后在頁(yè)面寫入a標(biāo)簽支持下載。
2.代碼實(shí)現(xiàn)
<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>3.結(jié)果顯示
到此這篇關(guān)于JavaScript中URL.createObjectURL和Blob實(shí)現(xiàn)保存文件的文章就介紹到這了,更多相關(guān)URL.createObjectURL和Blob保存文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
在寫項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01
用JSON.parse 來(lái)轉(zhuǎn)換成json對(duì)象，由于有注釋的存在則無(wú)法正確轉(zhuǎn)換甚至報(bào)錯(cuò)。匹配字符串中的所有注釋，包括單行和多行注釋2013-11-11
JS獲取input file絕對(duì)路徑的方法(推薦)
下面小編就為大家?guī)?lái)一篇JS獲取input file絕對(duì)路徑的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
用于deeplink的js方法(判斷手機(jī)是否安裝app)
這篇文章主要介紹了用于deeplink的js方法(判斷手機(jī)是否安裝app),需要的朋友可以參考下2014-04-04
Bootstrap select實(shí)現(xiàn)下拉框多選效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap select實(shí)現(xiàn)下拉框多選效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript文件上傳的常見(jiàn)問(wèn)題整理
這篇文章整理了JavaScript文件上傳的常見(jiàn)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
在本文中給大家分享如何使用raphael.js來(lái)完成地圖交互,raphael.js是一個(gè)很小的javascript庫(kù)，它可以在網(wǎng)頁(yè)中實(shí)現(xiàn)繪制各種矢量圖、各類圖表、以及圖像裁剪、旋轉(zhuǎn)、運(yùn)動(dòng)動(dòng)畫等等功能,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電商商品展示放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01