JavaScript使用Blob文件流下載txt、pdf、圖片等文件，自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名。
Blob（Binary Large Object）表示二進(jìn)制類(lèi)型的大對(duì)象。在數(shù)據(jù)庫(kù)管理系統(tǒng)中，將二進(jìn)制數(shù)據(jù)存儲(chǔ)為一個(gè)單一個(gè)體的集合。Blob 通常是影像、聲音或多媒體文件。在 JavaScript 中 Blob 類(lèi)型的對(duì)象表示不可變的類(lèi)似文件對(duì)象的原始數(shù)據(jù)。
原理
要檢查創(chuàng)建文件是否有效，需要訪(fǎ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)名稱(chēng)。
最后，在 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)文章
TypeScript?是一種強(qiáng)類(lèi)型的超集?JavaScript,它為開(kāi)發(fā)者提供了靜態(tài)類(lèi)型檢查、代碼提示以及更好的可維護(hù)性,本文將深入解析?TypeScript?裝飾器,從基礎(chǔ)概念到高級(jí)用法,逐步探討其作用、原理以及實(shí)際應(yīng)用場(chǎng)景,以幫助你更好地理解和利用這一功能,需要的朋友可以參考下2023-09-09
微信小程序模板消息限制實(shí)現(xiàn)無(wú)限制主動(dòng)推送的示例代碼
這篇文章主要介紹了微信小程序模板消息限制實(shí)現(xiàn)無(wú)限制主動(dòng)推送的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)美化滑塊效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了淺談JS中幾種輕松處理'this'指向方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)
這篇文章主要介紹了javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)，文字可以實(shí)現(xiàn)上下滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
TypeScript 不可變性 readonly, Readonly＜T＞的使用小結(jié)
TypeScript 作為 JavaScript 的超集,為我們提供了強(qiáng)大的類(lèi)型系統(tǒng),其中就包括了實(shí)現(xiàn)不可變性的有效工具,今天,我們就來(lái)聊聊如何使用 readonly和 Readonly來(lái)提升代碼的健壯性和可維護(hù)性2026-05-05
有關(guān)IE6下拉框圖層問(wèn)題，一直困擾著大家，下面有個(gè)不錯(cuò)的方法大家可以嘗試操作下2014-01-01
前端實(shí)現(xiàn)文本超出指定行數(shù)顯示"展開(kāi)"和"收起"效果詳細(xì)步驟
本文介紹如何使用JavaScript原生代碼實(shí)現(xiàn)文本折疊展開(kāi)效果,并提供方法指導(dǎo)如何在Vue或React等框架中修改實(shí)現(xiàn),詳細(xì)介紹了創(chuàng)建整體框架、設(shè)置樣式及利用JS控制元素的步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
httpclient模擬登陸具體實(shí)現(xiàn)(使用js設(shè)置cookie)
最簡(jiǎn)單的方法就是通過(guò)得到的cookie定制一個(gè)httpclient，感興趣的朋友可以了解下本文2013-12-12
js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法
這篇文章主要介紹了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法,通過(guò)js的window.requestAnimationFrame來(lái)解決這一問(wèn)題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10