vue中post请求返回二进制流文件下载

news2024/11/22 20:01:35

1 .调用接口返回的如下图所示,此时看到是一个流文件

2.不管是get请求还是post请求都需要加上下面这行代码

  responseType: "blob",

3.我们自行二次封装的axios可能会导致乱码现象,建议直接用axios调用接口请求

4.关于Excel导出 POI 响应头设置 Content-Type: application/vnd.ms-excel 异常解决方法,可以在需要的请求头处多加一个

axios.defaults.headers['Content-type'] = 'application/vnd.ms-excel;charset=utf-8';

打印出来的res,通过a标签下载就可以了

完整代码如下

function exportData(res: any) {
    let url = window.URL.createObjectURL(new Blob([res], { type: '.xlsx' }));
    let a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.setAttribute('download', `数据统计报表.xlsx`);
    document.body.appendChild(a);
    a.click();
    url = window.URL.revokeObjectURL(url);
    document.body.removeChild(a)
}
//导出文件
const microApptaskExport = async (params: object = {}) => {
    axios.defaults.headers["Authorization"] = userState.token;
    axios.defaults.headers['Content-type'] = 'application/vnd.ms-excel;charset=utf-8';
    const res = await axios.post(
        "http:// 此处为请求地址",
        params,
        {
            responseType: "blob",
        }
    );
    if (res) {
        console.log(res, '获取到的res')
        exportData(res.data);
    }
}

注:如果下载的文件为 [object,object] ,将res.data给函数就行

踩坑一 : 封装的index.ts请求中使用了mockjs 这会导致 blob 置空 ,建议直接使用axios请求

踩坑二:请求地址为http这时控制台会报错