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

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});
  
// 得到一个 blob

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

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))) || {};
}