1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式
更新時(shí)間：2024年03月02日 10:01:05 作者：渣男語錄
在前端開發(fā)中,我們經(jīng)常需要實(shí)現(xiàn)文件下載功能,例如下載用戶上傳的圖片、用戶生成的文件等,這篇文章主要給大家介紹了關(guān)于如何通過1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式,需要的朋友可以參考下
1、a標(biāo)簽下載 —可以直接下載txt、png、pdf、exe、xlsx等類型文件
downFile = (url) => {
const a = document.createElement('a');
a.style.display = 'none';
a.download = 'xx';
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
/*
* download: HTML5新增的屬性
* url: 屬性的地址必須是非跨域的地址
*/
};
2、new Blob 文件流下載
//fileName : 設(shè)置下載的文件名稱
//filestream: 返回的文件流
const blob = new Blob([filestream], {type: 'application/vnd.ms-excel'});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 創(chuàng)建下載連接
a.href = href;
a.download = decodeURI(fileName );
document.body.appendChild(a);
a.click();
document.body.removeChild(a); // 下載完移除元素
window.URL.revokeObjectURL(href); // 釋放掉blob對象
3、window.open下載
window.open(url, '_self');
缺點(diǎn)：
會出現(xiàn)URL長度限制問題
需要注意url編碼問題
無法獲取下載進(jìn)度
無法在header中攜帶token做鑒權(quán)操作
無法判斷接口是否成功
無法直接下載瀏覽器可直接預(yù)覽的文件類型（txt、png、pdf會直接預(yù)覽）
4、location.href 下載
window.location.href = url
缺點(diǎn)：
會出現(xiàn)URL長度限制問題
需要注意url編碼問題
無法獲取下載進(jìn)度
無法在header中攜帶token做鑒權(quán)操作
無法直接下載瀏覽器可直接預(yù)覽的文件類型（txt、png、pdf會直接預(yù)覽）
無法判斷接口是否返回成功
總結(jié)
到此這篇關(guān)于js實(shí)現(xiàn)下載文件功能的4種方式的文章就介紹到這了,更多相關(guān)js下載文件功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS取得絕對路徑的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-01-01
js實(shí)現(xiàn)點(diǎn)擊切換和自動播放的輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊切換和自動播放的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript異步forEach的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Javascript基礎(chǔ)知識盲點(diǎn)總結(jié)之函數(shù)
函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。這篇文章主要介紹了Javascript基礎(chǔ)知識盲點(diǎn)總結(jié)之函數(shù)的相關(guān)資料2016-05-05
這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)消消樂小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
下面小編就為大家?guī)硪黄仙Ｕ?js中this的指向。小編覺得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法
今天小編就為大家分享一篇轉(zhuǎn)換layUI的數(shù)據(jù)表格中的日期格式方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了前端冒泡排序算法的相關(guān)資料,冒泡排序是一種簡單的排序算法,通過比較相鄰元素并交換位置,實(shí)現(xiàn)元素排序,該算法的時(shí)間復(fù)雜度為O(n^2),空間復(fù)雜度為O(1),具有穩(wěn)定性,適用于小規(guī)模數(shù)據(jù)集和對穩(wěn)定性要求高的場景,需要的朋友可以參考下2024-10-10
原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法詳解
最近學(xué)習(xí)中遇到這個(gè)問題，為了日后方便查詢，本人翻閱了一些資料總結(jié)了以下方法，僅限原生JS，如有不對的地方歡迎指出！只求大家看完覺得有學(xué)到點(diǎn)什么就OK了！下面這篇文章主要介紹了利用原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法,需要的朋友可以參考下。2017-02-02
javascript匿名函數(shù)中的''return function()''作用
這篇文章主要介紹了javascript匿名函數(shù)中的'return function()'作用介紹,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10