前端js/vue下載後臺傳過來的流文件（如excel）並設置下載文件名

這裏介紹兩種方法，使用 Blob對象 和 使用 js-file-download
​
這兩種方法下載的文件都 不會亂碼，可是 無論使用哪一種方法，發送請求時都要設置 responseType
​
若是不打算了解直接使用，請經過目錄或者直接點擊跳轉

4、主要完整代碼

​

方法一：使用Blob對象

Blob對象表示一個不可變、原始數據的類文件對象。Blob 表示的不必定是JavaScript原生格式的數據。File接口基於Blob，繼承了blob的功能並將其擴展使其支持用戶系統上的文件。

1、Blob() 構造函數

摘自：Blob() 構造函數

語法

var aBlob = new Blob( array, options );

參數

• array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其餘相似對象的混合體，它將會被放進 Blob。DOMStrings會被編碼爲UTF-8。

• options 是可選的，它可能會指定以下兩個屬性：

  • type，默認值爲 ""，它表明了將會被放入到blob中的數組內容的MIME類型。也就是設置文件類型。
  • endings，默認值爲"transparent"，用於指定包含行結束符n的字符串如何被寫入。 它是如下兩個值中的一個： "native"，表明行結束符會被更改成適合宿主操做系統文件系統的換行符，或者 "transparent"，表明會保持blob中保存的結束符不變。

​

2、URL對象

經過建立URL對象指定文件的下載連接。

// 建立新的URL表示指定的File對象或者Blob對象。
let objectURL = window.URL.createObjectURL(blob); 
window.URL.revokeObjectURL(objectURL); // 釋放內存

在每次調用createObjectURL()方法時，都會建立一個新的 URL 對象，即便你已經用相同的對象做爲參數建立過。當再也不須要這些 URL 對象時，每一個對象必須經過調用 URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，可是爲了得到最佳性能和內存使用情況，你應該在安全的時機主動釋放掉它們。

​

3、利用a標籤自定義文件名

const link = document.createElement('a'); // 生成一個a標籤。
link.href = window.URL.createObjectURL(blob); // href屬性指定下載連接
link.download = fileName; // dowload屬性指定文件名
link.click(); // click()事件觸發下載

download 屬性設置文件名時，能夠直接設置擴展名。若是沒有設置，則瀏覽器將自動檢測正確的文件擴展名並添加到文件 。

<h3 id='t4'>四：主要完整代碼</h3>

• 普通下載

axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
        // 建立Blob對象，設置文件類型
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
        let objectUrl = URL.createObjectURL(blob) // 建立URL
        location.href = objectUrl;
        URL.revokeObjectURL(objectUrl); // 釋放內存
    })

• 自定義下載後的文件名

// 利用a標籤自定義下載文件名
    const link = document.createElement('a')
    
    axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
        // 建立Blob對象，設置文件類型
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
        let objectUrl = URL.createObjectURL(blob) // 建立URL
        link.href = objectUrl
        link.download = 'xxx' // 自定義文件名
        link.click() // 下載文件
        URL.revokeObjectURL(objectUrl); // 釋放內存
    })

注 ：下載指定擴展名的文件只須要對照 MIME 參考手冊設置type便可。

方法二：使用 js-file-download

• 安裝

npm install js-file-download --save

• 使用

import fileDownload from 'js-file-download'

axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
    fileDownload(res.data, 'xxx.xls')
})