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做鑒權(quán)操作
無法判斷接口是否成功
無法直接下載瀏覽器可直接預覽的文件類型（txt、png、pdf會直接預覽）
4、location.href 下載
window.location.href = url
缺點：
會出現(xiàn)URL長度限制問題
需要注意url編碼問題
無法獲取下載進度
無法在header中攜帶token做鑒權(quán)操作
無法直接下載瀏覽器可直接預覽的文件類型（txt、png、pdf會直接預覽）
無法判斷接口是否返回成功
總結(jié)
到此這篇關于js實現(xiàn)下載文件功能的4種方式的文章就介紹到這了,更多相關js下載文件功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要分享了javascript實現(xiàn)導航欄中英文切換效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
JS對象轉(zhuǎn)換為Jquery對象實現(xiàn)代碼
很多新手朋友們都不知道js對象如何轉(zhuǎn)換為jquery對象，其實很簡單，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
下面小編就為大家?guī)硪黄狫S判斷瀏覽器是否安裝flash插件的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
BOM：BrowserObjectModel,瀏覽器對象模型，提供JS中對瀏覽器的各種操作的對象，是JS應用中唯一沒有相關標準的部分，這事BOM經(jīng)常出現(xiàn)問題的所在，主要用于處理瀏覽器窗口與框架，瀏覽器特有的JS擴展也被默認為BOM的一部分，而各瀏覽器之間的公有對象就成了默認的標準2015-11-11
這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
JavaScript基于ChatGPT?API實現(xiàn)劃詞翻譯瀏覽器腳本
最近?GitHub?上有個基于?ChatGPT?API?的瀏覽器腳本，openai-translator，?短時間內(nèi)?star?沖到了?9.7k，拋開?tauri?是使用?rust?部分，那瀏覽器部分實現(xiàn)還是比較簡單的，今天我們就來手動實現(xiàn)一下2023-03-03
這篇文章主要介紹了微信小程序button標簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
WebGame《逆轉(zhuǎn)裁判》完整版 代碼下載(1月24日更新)
WebGame《逆轉(zhuǎn)裁判》完整版 代碼下載(1月24日更新)...2007-01-01
css實現(xiàn)窗戶上水珠效果，效果特別逼真，窗外的雨淅淅瀝瀝飄打在玻璃上，看起來很像模糊的窗外，斜滴的雨露，接下來給大家一起來用CSS技術實現(xiàn)這樣一幅畫面，下面給大家分享使用純css實現(xiàn)窗戶玻璃雨滴逼真效果，感興趣的朋友快樂圍觀吧2015-08-08
最近項目中遇到些字符串亂碼問題，解決后有些心得，記錄于此。2009-12-12