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

前端實現文件下載常見的幾種方法總結

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

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

一、location.href

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

適用場景：

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

二、window.open

和location.href類似

window.open(url);

三、a標簽

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

適用場景：

  • 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">

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

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

四、文件流

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

適用場景：

  • 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
    // 需要后端設置 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: { //如果需要權限下載的話，加在這里
        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，其中包含一個表示參數中給出的對象的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回調函數中通過實例對象的result屬性獲取data:URL格式的字符串（base64編碼），此字符串即為讀取文件的內容，可以放入a標簽的href屬性中。

downloadFile:function(data,fileName){
   const reader = new FileReader()
   // 傳入被讀取的blob對象
   reader.readAsDataURL(data)
   // 讀取完成的回調事件
   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)得到的是當前文件的一個內存 URL。
  • 內存 FileReader.readAsDataURL(blob)依照js垃圾回收機制自動從內存中清理。 URL.createObjectURL(blob)存在于當前document內，清除方式通過revokeObjectURL()手動清除。
  • 執(zhí)行方式 FileReader.readAsDataURL(blob)通過回調的方式f返回，異步執(zhí)行。
    URL.createObjectURL(blob) 直接返回，同步執(zhí)行。
  • 多個文件 FileReader.readAsDataURL(blob)同時處理多個文件時，需要一個文件對應一個FileReader對象URL.createObjectURL(blob) 依次返回，沒有影響。
  • 優(yōu)勢對比 URL.createObjectURL(blob)得到本地內存容器的 URL地址，方便預覽，需要注意手動釋放內存的問題，性能優(yōu)秀。
    FileReader.readAsDataURL(blob)可直接轉為base64格式，直接用于業(yè)務。

總結 

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

相關文章

  • JS嵌套函數調用上下文的問題解決

    JS嵌套函數調用上下文的問題解決

    這篇文章主要探討了JS嵌套函數調用上下文的問題,需要的朋友可以參考下
    2014-03-03
  • javascript中sort() 方法使用詳解

    javascript中sort() 方法使用詳解

    sort()方法主要是用于對數組進行排序，默認情況下該方法是將數組元素轉換成字符串，然后按照ASC碼進行排序，這個大家都能理解，但如果數組元素是一個Object呢，轉不了字符串，難道不能進行排序？答案當然是否定的,那么我們就來詳細探討下sort()方法的使用
    2015-08-08
  • JS cookie中文亂碼解決方法

    JS cookie中文亂碼解決方法

    本篇文章主要是對JS中的cookie中文亂碼解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01
  • JavaScript中Set和Map數據結構使用場景詳解

    JavaScript中Set和Map數據結構使用場景詳解

    這篇文章主要為大家介紹了JavaScript中Set和Map數據結構使用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-06-06
  • ES6中字符串string常用的新增方法小結

    ES6中字符串string常用的新增方法小結

    這篇文章主要介紹了ES6中字符串string常用的新增方法,結合實例形式總結分析了ES6中字符串string常用的新增方法功能與使用技巧,需要的朋友可以參考下
    2017-11-11
  • 微信小程序template模板引入的問題小結

    微信小程序template模板引入的問題小結

    這篇文章主要介紹了微信小程序template模板引入的問題小結,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • Bootstrap實現基于carousel.js框架的輪播圖效果

    Bootstrap實現基于carousel.js框架的輪播圖效果

    這篇文章主要為大家詳細介紹了Bootstrap實現基于carousel.js框架的輪播圖效果，無過渡動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • JavaScript實現京東放大鏡效果

    JavaScript實現京東放大鏡效果

    這篇文章主要為大家詳細介紹了JavaScript實現京東放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • JavaScript使用ActiveXObject訪問Access和SQL Server數據庫

    JavaScript使用ActiveXObject訪問Access和SQL Server數據庫

    這篇文章主要介紹了JavaScript使用ActiveXObject訪問Access和SQL Server數據庫,本文分別給出相應操作代碼,需要的朋友可以參考下
    2015-04-04
  • JavaScript實現圖片偽異步上傳過程解析

    JavaScript實現圖片偽異步上傳過程解析

    這篇文章主要介紹了javascript實現圖片偽異步上傳過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-04-04

最新評論