后端返回的是文件流,需要前端转换成Excel文件并下载到本地,具体写法如下:
axios.post('/api/export', qs.stringify(params), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded', //请求的数据类型为form data格式
},
'responseType': 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
}).then(function (response) {
const blob = new Blob([response.data]);
const fileName = 'xxx.xls';
const linkNode = document.createElement('a');
linkNode.download = fileName; //a标签的download属性规定下载文件的名称
linkNode.style.display = 'none';
linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
document.body.appendChild(linkNode);
linkNode.click(); //模拟在按钮上的一次鼠标单击
URL.revokeObjectURL(linkNode.href); // 释放URL 对象
document.body.removeChild(linkNode);
}).catch(function (error) {
console.log(error);
});
按照网上的一些写法,但是请求时都没有加上responseType:blob,出现的错误类型:
- 导出的文件乱码
const blob = new Blob([response.data])
写成
const blob = new Blob([response.data],{type: 'application/vnd.ms-excel'})
导出的文件打开,显示为[object Object]
所以,解决乱码问题的关键就是请求时加上 ‘responseType’: 'blob’
附上 Blob 对象的详细介绍:
https://segmentfault.com/a/1190000011563430