vue中post请求返回二进制流文件下载
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,没有别的办法