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