JavaScript使用Blob文件流下載txt、pdf、圖片等文件，自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名。
Blob（Binary Large Object）表示二進(jìn)制類型的大對(duì)象。在數(shù)據(jù)庫(kù)管理系統(tǒng)中，將二進(jìn)制數(shù)據(jù)存儲(chǔ)為一個(gè)單一個(gè)體的集合。Blob 通常是影像、聲音或多媒體文件。在 JavaScript 中 Blob 類型的對(duì)象表示不可變的類似文件對(duì)象的原始數(shù)據(jù)。
原理
要檢查創(chuàng)建文件是否有效，需要訪問(wèn)它，并進(jìn)行下載。
實(shí)現(xiàn)的方式是生成一個(gè)包含對(duì)文件引用的鏈接。然后，讓 JavaScript 出發(fā)時(shí)間 click 來(lái)點(diǎn)擊鏈接，這樣文件就可以下載了。
為了接收文件 URL，需要使用 URL.createObjectURL() 方法將接收文件對(duì)象作為參數(shù)。然后，通過(guò)設(shè)置鏈接的下載屬性，指定保存的文件默認(rèn)名稱。
最后，在 DOM 中掛載鏈接，單擊它后，將其從 DOM 中刪除。
示例方法代碼
function downLoadEvent(path) {
const fileNametitle = document.title+'.'+path.split('?')[0].split('.').slice(-1)[0];
const downloadRes = async () => {
let response = await fetch(path);
let blob = await response.blob();
let objectUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = objectUrl;
a.download = fileNametitle;
a.click();
a.remove();
}
downloadRes();
}path為文件絕對(duì)路徑；
document.title為網(wǎng)頁(yè)標(biāo)題，這里可以自定義名字；
path.split('?')[0].split('.').slice(-1)[0]為path中的文件后綴名。
調(diào)用示例：downLoadEvent("https://www.***.com/upload/test.txt")
到此這篇關(guān)于JavaScript使用Blob文件流下載txt、pdf、圖片等文件，自定義下載文件名的文章就介紹到這了,更多相關(guān)JavaScript使用Blob下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript DOM操作之動(dòng)態(tài)刪除TABLE多行
DOM動(dòng)態(tài)刪除TABLE tr行的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-12-12
JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format
本文主要介紹了JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format（可自動(dòng)解析引號(hào)轉(zhuǎn)義字符）。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
TypeScript?使用?Tuple?Union?聲明函數(shù)重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載，TypeScript 中為函數(shù)添加多個(gè)簽名后，依然需要添加相應(yīng)的代碼來(lái)判斷并從不同的簽名參數(shù)列表中獲取對(duì)應(yīng)的參數(shù)，下文就來(lái)探索方法和技巧吧2022-04-04
顯示js對(duì)象所有屬性和方法，從網(wǎng)上整理了不少，大家可以看下原理都是差不多的。2009-10-10
這篇文章主要介紹了js實(shí)現(xiàn)加載更多功能的方法,以實(shí)例演示了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)微信聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
js加強(qiáng)的經(jīng)典分頁(yè)實(shí)例
js加強(qiáng)的經(jīng)典分頁(yè)實(shí)例，需要的朋友可以參考一下2013-03-03
基于JavaScript實(shí)現(xiàn)拖動(dòng)滑塊效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)拖動(dòng)滑塊效果，拖動(dòng)滑塊時(shí)數(shù)字進(jìn)行變化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要給大家介紹了關(guān)于JS溫故而知新之變量提升和時(shí)間死區(qū)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JavaScript中的閉包(Closure)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的閉包(Closure)詳細(xì)介紹,函數(shù)調(diào)用對(duì)象與變量的作用域鏈、什么是閉包等內(nèi)容,并給出了實(shí)例,需要的朋友可以參考下2014-12-12