使用vue+ axios 下载流文件(excel)无法打开的文件

我今天使用流下载 导出生成的execl文件,而前端模拟a标签模拟下载文件,但是下载无法打开生成的excel文件

image

请求的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
作者
归云
发布于
2021年06月23日
更新于
2024年06月18日
许可协议