2021-07-23 前端excel文件下载两种方式

1.后端输出文件流

当直接请求文件的时候，后端会输出文件流，前端看到的输出结果可能是一堆乱码。

此时，需要将前端请求文件的ajax请求中加入 responseType: ‘blob’,这样就可以将请求回来的转化为bolb格式。我这里是这样封装的。

download(url, params = {}, headers = {}) {
  return AJAX.get(url, {
         params: params,
         responseType: 'blob',
         headers: {
             ...headers,
         },
     });
 },

然后请求回来以后，处理数据，模拟下载。

const params = {
   //请求参数，此处省略
};
await getDownloadFile(params).then(res => {
    resolveBlob(res, '文件名称.xlsx');  //方法在下面
});

resolveBlob(res, filename) {
    const aLink = document.createElement('a');
    const blob = new Blob([res], { type: mimeMap.xlsx });
    aLink.href = URL.createObjectURL(blob);
    aLink.setAttribute('download', filename); // 下载文件名称
    document.body.appendChild(aLink);
    aLink.click();
    URL.revokeObjectURL(aLink.href); // 释放URL对象
    document.body.removeChild(aLink);
}

2.后端输出base64格式的文件（base字符串）

我这里有种情况，当这个文件是后端生成的，但是又不想存储在服务器上，想要直接返回，而且后端需要返回多个参数，其中有一个参数为文件流，但是只能转为字符串返回，后端需要将文件处理为base64字符串返回，我们可以这样处理并下载。

//请求结果 res
const baseData = btoa(res.fileP);
const byteCharacters = atob(res.file);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {
//type  可以改为你的文件类型(查询你的文件需要的type)  我这里是excel 
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const url = window.URL.createObjectURL(blob); // 创建url 地址为blob对象
const alink = document.createElement('a');
alink.href = url;
alink.download = '文件名.xlsx';
alink.click();