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