JavaScript 接收excel文件流并下载

条件：后端接口请求返回文件流，前端处理文件流转换成下载地址并下载
实现方法有二，一通过Blob对象和createObjectURL方法生成一个地址，二通过FileReader转成base64

方法一

1、axios请求携带参数responseType: 'arraybuffer', //二进制流

axios({
    responseType: 'arraybuffer', //二进制流
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    }
 })

2、处理文件流并下载

res是请求结果，res.data是文件流，res.headers是请求响应头

const headers = res.headers
let a = document.createElement("a");
// 响应头获取编码的文件名称
let filename = decodeURI(headers["content-disposition"].split(";")[1].split("=")[1])
try {
    //该实例化的方式第一个参数必须是数组的格式
    var blob = new Blob([res.data], { type: 'application/vnd.ms-excel,charset=utf-8' });
} catch (e) {
    //旧版本浏览器下的blob创建对象
    window.BlobBuilder = window.BlobBuilder ||
        window.WebKitBlobBuilder ||
        window.MozBlobBuilder ||
        window.MSBlobBuilder;
    if (e.name == 'TypeError' && window.BlobBuilder) {
        var blobbuilder = new BlobBuilder();
        BlobBuilder.append(data);
        var blob = blobbuilder.getBlob('application/vnd.ms-excel,charset=utf-8');
    } else {
        alert("浏览器版本较低，暂不支持该文件类型下载");
    }
}
let url = window.URL.createObjectURL(blob);

a.setAttribute("href", url)
a.download = filename
document.body.appendChild(a);
a.click()
document.body.removeChild(a);

方法二

1、axios携带参数 responseType: "blob"

axios({
    responseType: "blob", //blob流
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    }
 })

2、处理文件流并下载

let blob = res.data;
const reader = new FileReader();

reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href

reader.onload = e => {
    // 转换完成，创建一个a标签用于下载

    let a = document.createElement("a");
    a.style.display = "none";
    a.download = "data.xls";

    a.href = e.target.result;
    const body = document.body;
    document.body.appendChild(a); // 修复firefox中无法触发click
    a.click();
    document.body.removeChild(a);
};