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