前端怎麼處理二進制文件下載

前言

• 有這樣需求，須要下載一個 excel 表格。
• 主要是後端渲染一個 excel 格式的二進制文件，接口返回一個 ArrayBuff 類型的文件，而後前端提供用戶下載。
• 後端不能直接提供下載的連接，有 token 的保護，咱們前端須要進行一下額外的處理。

先了解一下URL.createObjectURL(object)方法 和 blob 對象

createObjectURL

objectURL = URL.createObjectURL(object);

• 用於建立 URL 的 File 對象、Blob 對象或者 MediaSource 對象。

---

blob

var aBlob = new Blob( array, options );

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

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

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});
  
// 獲得一個 blob
複製代碼

downloadFile 函數

• 接口返回的 ArrayBuffer 對象

• 主要界面概況

  

下面就開始來寫主要的代碼吧

• html

<button onclick="downloadFile(API.getExcel(),{ excel_name: '數據表單' })">點擊下載</button>

複製代碼

• js

/** * @param {*} apiUrl // api 地址 * @param {*} params // 配置項 * @param {*} blobType // 文件類型，你能夠和後端對接傳入合理的 type * @param {*} fileSuffix // 文件後綴，具體的後綴視需求而定 */

 function downloadFile(apiUrl, params = { excel_name: 'data' }, blobType = 'application/ynd.ms-excel;charset=UTF-8',excelTypeSuffix:string = 'xls') { 

    if (!apiUrl) {
        console.error('please input API URL!');
        
        return;
    }

    // 這裏示例使用 axios，apiUrl 爲後端提供的相關接口
    return axios
        .get(apiUrl, {
            params,
            responseType: 'arraybuffer'
        })
        .then(
            resp => {
                // 先把後端返回的 resp 包裝成一個 Blob 類型
                let localHref = window.URL.createObjectURL(
                    new Blob([resp], { type: blobType })
                );
                
                // 建立一個 a 標籤用來下載文件
                let ele = document.createElement('a');

                ele.href = localHref;

                // download 屬性決定下載的文件的名字
                ele.download = `${params.excel_name}.${excelTypeSuffix}`;

                document.querySelectorAll('body')[0].appendChild(ele);

                ele.click();

                // 主動移除這個 a 標籤,來釋放內存
                setTimeout(() => {
                    ele.remove();
                }, 1000);
            },
            err => {
                console.error(err);
            }
        )
        .finally(() => {
            console.log('end')
        });
}
 
複製代碼

• 下載文件以下圖

怎麼處理文件流接口返回的錯誤啦？

• 主要問題：由於接口返回的是 ArrayBuffer 格式，咱們這裏須要判斷一下返回的 data 有沒有 byteLength，若是有的話，咱們使用以下的方面把數據轉換成一個正常的 json 格式，而後就能夠正常的彈出 error.error_message

let data = response.data
 // 處理responseType: 'arraybuffer'錯誤
if (data && data.byteLength) {
    var enc = new TextDecoder('utf-8');

    data = JSON.parse(enc.decode(new Uint8Array(response.data))) || {};
}
複製代碼

• 具體使用參考 MDN 吧
• developer.mozilla.org/zh-CN/docs/…

參考

• stackoverflow.com/questions/3…
• developer.mozilla.org/zh-CN/docs/…
• developer.mozilla.org/zh-CN/docs/…