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

最新推荐文章于 2024-07-29 18:13:57 发布

weixin_30776545

最新推荐文章于 2024-07-29 18:13:57 发布

阅读量917

点赞数

文章标签：前端 javascript 后端 ViewUI

原文链接：https://juejin.im/post/5d1f34aef265da1bbc6ff604

版权

前言

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

复制代码

 /**
  * @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.error_msg);
            }
        )
        .finally(() => {
            console.log('end')
        });
}
 
复制代码