使用vue+ axios 下载流文件(excel)无法打开的文件
我今天使用流下载 导出生成的execl文件,而前端模拟a标签模拟下载文件,但是下载无法打开生成的excel文件
请求的api.js
export function getDownload(id) {
return request({
url: '/deptApply/item/download/' + id,
method: 'get'
})
}
下载的方法
getDownloadById(id) {
getDownload(id).then(res => {
const link = document.createElement('a');
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
link.style.display = 'none';
link.href = URL.createObjectURL(blob);//创建url对象
link.download = res.headers['content-disposition'].substr(20); //下载后文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);//销毁url对象
})
},
后台的请求方法
@GetMapping("download")
public void download(HttpServletResponse response) throws IOException {
// 这里注意 有同学反应使用swagger 会导致各种问题,请直接用浏览器或者用postman
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setCharacterEncoding("utf-8");
// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
String fileName = URLEncoder.encode("测试", "UTF-8").replaceAll("\\+", "%20");
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
EasyExcel.write(response.getOutputStream(), DownloadData.class).sheet("模板").doWrite(data());
}
后台使用postman测试确实没问题,但前端导出就是打不开
解决方法
在api.js 的请求方法里加一行代码就好了
export function getDownload(id) {
return request({
url: '/deptApply/item/download/' + id,
method: 'get',
responseType: 'blob'
})
}
使用vue+ axios 下载流文件(excel)无法打开的文件
https://guiyunweb.com/archives/%E4%BD%BF%E7%94%A8vueaxios%E4%B8%8B%E8%BD%BD%E6%B5%81%E6%96%87%E4%BB%B6excel%E6%97%A0%E6%B3%95%E6%89%93%E5%BC%80%E7%9A%84%E6%96%87%E4%BB%B6