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这时控制台会报错
解决方法 http => https,没有别的办法