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)導(dǎo)航欄中英文切換效果
本篇文章主要分享了javascript實(shí)現(xiàn)導(dǎo)航欄中英文切換效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JS對象轉(zhuǎn)換為Jquery對象實(shí)現(xiàn)代碼
很多新手朋友們都不知道js對象如何轉(zhuǎn)換為jquery對象，其實(shí)很簡單，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
下面小編就為大家?guī)硪黄狫S判斷瀏覽器是否安裝flash插件的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
Javascript BOM學(xué)習(xí)小結(jié)(六)
BOM：BrowserObjectModel,瀏覽器對象模型，提供JS中對瀏覽器的各種操作的對象，是JS應(yīng)用中唯一沒有相關(guān)標(biāo)準(zhǔn)的部分，這事BOM經(jīng)常出現(xiàn)問題的所在，主要用于處理瀏覽器窗口與框架，瀏覽器特有的JS擴(kuò)展也被默認(rèn)為BOM的一部分，而各瀏覽器之間的公有對象就成了默認(rèn)的標(biāo)準(zhǔn)2015-11-11
這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(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)還是比較簡單的，今天我們就來手動實(shí)現(xiàn)一下2023-03-03
微信小程序button標(biāo)簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標(biāo)簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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)窗戶上水珠效果，效果特別逼真，窗外的雨淅淅瀝瀝飄打在玻璃上，看起來很像模糊的窗外，斜滴的雨露，接下來給大家一起來用CSS技術(shù)實(shí)現(xiàn)這樣一幅畫面，下面給大家分享使用純css實(shí)現(xiàn)窗戶玻璃雨滴逼真效果，感興趣的朋友快樂圍觀吧2015-08-08
最近項(xiàng)目中遇到些字符串亂碼問題，解決后有些心得，記錄于此。2009-12-12