前端怎么处理二进制文件下载

前言

• 有这样需求，须要下载一个 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/…