欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端實現(xiàn)文件下載常見的幾種方法總結(jié)

 更新時間：2025年01月09日 11:27:58   作者：小周同學(xué)_丶  
這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)文件下載常見的幾種方法,需要的朋友可以參考下

以下是工作中前端常見的文件下載的幾種方法。歡迎大家補充指正。

一、location.href

對于一些瀏覽器無法識別的文件格式，可以直接再瀏覽器地址欄輸入url即可觸發(fā)瀏覽器的下載功能。對于單文件下載沒有什么問題，但是如果下載多文件，點擊過快就會重置掉前面的請求。

適用場景：

  • get請求
  • 單文件下載
window.location.href = url;

二、window.open

和location.href類似

window.open(url);

三、a標簽

直接下載僅適用于瀏覽器無法識別的文件。如果是瀏覽器支持的文件格式，如html、jpg、png、pdf等，則不會觸發(fā)文件下載，而是直接被瀏覽器解析并展示，這種情況下，可以使用a標簽下載文件，download屬性可以設(shè)置文件名。適用于單文件下載，如果下載多文件，點擊過快就會重置掉前面的請求。

適用場景：

  • get請求
  • 單文件下載
  • 需要自定義文件名
//寫法1
const download = (filename, url) => {
    let a = document.createElement('a'); 
    a.style = 'display: none'; // 創(chuàng)建一個隱藏的a標簽
    a.download = filename;
    a.href = url;
    document.body.appendChild(a);
    a.click(); // 觸發(fā)a標簽的click事件
    document.body.removeChild(a);
}
// 寫法2
<a href="/images/download.jpg" rel="external nofollow"  download="myFileName">

注意：有時候?qū)τ跒g覽器可識別的文件格式，我們還是需要直接下載的情況，可以聲明一下文件的header的 Content-Disposition信息，告訴瀏覽器，該鏈接為下載附件鏈接，并且可以聲明文件名。

Content-Disposition: attachment; filename="filename.xls"

四、文件流

如果需要使用post請求，且后端返回是一個文件流形式，那么前端需要自己將文件流轉(zhuǎn)成鏈接，然后下載。 二進制流大概長這樣：

適用場景：

  • post請求
  • get請求
  • 多文件

1.請求的方式

注意：不可以使用JQuery，因為JQuery不支持blob類型。

原生js寫法

const req = new XMLHttpRequest();
req.open('POST', '/download/excel', true);
req.responseType = 'blob'; //如果不指定，下載后文件會打不開
req.setRequestHeader('Content-Type', 'application/json');
req.onload = function() {
    var content = req.getResponseHeader("Content-Disposition") ;
    // 文件名最好用后端返的Content-disposition
    // 需要后端設(shè)置 Access-Control-Expose-Headers: Content-disposition 使得瀏覽器將該字段暴露給前端
    var name = content && content.split(';')[1].split('filename=')[1];
    var fileName = decodeURIComponent(name)
    downloadFile(req.response,fileName)
};
req.send( JSON.stringify(params));

 axios寫法

axios({
  method: 'post',
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  url: '/robot/strategyManagement/analysisExcel',
  responseType: 'blob',
  headers: { //如果需要權(quán)限下載的話，加在這里
        Authorization: '123456'
    }
  data: JSON.stringify(params),
}).then(function(res){
   var content = res.headers['content-disposition'];
   var name = content && content.split(';')[1].split('filename=')[1];
   var fileName = decodeURIComponent(name)
   downloadFile(res.data,fileName)
})

2.文件下載的方式

通過URL.createObjectURL()下載

URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的document綁定。

downloadFile:function(data,fileName){
    // data為blob格式
    var blob = new Blob([data]);
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    downloadElement.download = fileName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
}

通過# FileReader.readAsDataURL()下載

readAsDataURL() 方法會讀取指定的 Blob 或 File 對象。讀取操作為異步操作，當讀取完成時，可以從onload回調(diào)函數(shù)中通過實例對象的result屬性獲取data:URL格式的字符串（base64編碼），此字符串即為讀取文件的內(nèi)容，可以放入a標簽的href屬性中。

downloadFile:function(data,fileName){
   const reader = new FileReader()
   // 傳入被讀取的blob對象
   reader.readAsDataURL(data)
   // 讀取完成的回調(diào)事件
   reader.onload = (e) => {
       let a = document.createElement('a')
       a.download = fileName
       a.style.display = 'none'
       // 生成的base64編碼
       let url = reader.result
       a.href = url
       document.body.appendChild(a)
       a.click()
       document.body.removeChild(a)
   }
}

兩者的區(qū)別

  • 返回值 FileReader.readAsDataURL(blob)可以得到一段base64的字符串。
    URL.createObjectURL(blob)得到的是當前文件的一個內(nèi)存 URL。
  • 內(nèi)存 FileReader.readAsDataURL(blob)依照js垃圾回收機制自動從內(nèi)存中清理。 URL.createObjectURL(blob)存在于當前document內(nèi)，清除方式通過revokeObjectURL()手動清除。
  • 執(zhí)行方式 FileReader.readAsDataURL(blob)通過回調(diào)的方式f返回，異步執(zhí)行。
    URL.createObjectURL(blob) 直接返回，同步執(zhí)行。
  • 多個文件 FileReader.readAsDataURL(blob)同時處理多個文件時，需要一個文件對應(yīng)一個FileReader對象URL.createObjectURL(blob) 依次返回，沒有影響。
  • 優(yōu)勢對比 URL.createObjectURL(blob)得到本地內(nèi)存容器的 URL地址，方便預(yù)覽，需要注意手動釋放內(nèi)存的問題，性能優(yōu)秀。
    FileReader.readAsDataURL(blob)可直接轉(zhuǎn)為base64格式，直接用于業(yè)務(wù)。

總結(jié) 

到此這篇關(guān)于前端實現(xiàn)文件下載常見的幾種方法的文章就介紹到這了,更多相關(guān)前端文件下載方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論