前端axios下载csv文件乱码
大约 2 分钟
问题
现在有个后端下载csv文件的接口,在浏览器地址栏直接请求这个接口,下载的文件用office的excel打开不乱码(wps也能正常显示),但通过页面点击按钮来下载,保存的文件用office的excel打开就乱码(wps还是能正常显示)。
后端代码大概这样:
/**
*
* @param response
* @param checkResultFileUrl 这个文件要求是gkb编码
* @throws IOException
*/
@Override
public void downloadCheckResult(HttpServletResponse response, String checkResultFileUrl) throws IOException {
response.setCharacterEncoding("GBK");
response.addHeader("Content-Disposition", "attachment; filename=checkResult.csv");
response.addHeader("Content-Type", "text/csv");
ServletOutputStream outputStream = response.getOutputStream();
InputStream is = fileStorageService.getFileInputStream(checkResultFileUrl);
byte[] bytes = IOUtils.readFully(is, is.available());
outputStream.write(bytes);
outputStream.flush();
outputStream.close();
}
前端代码大概这样:

解决方法
发起请求的时候不设置 responseType: 'blob',并且在downLoadFile函数中类似下面的修改
let resData ='\ufeff' + row.data;
const blob = new Blob([resData], {
type: 'text/csv,charset=UTF-8'
});
成功!!! 关键点是在返回的data 上加上'\ufeff’

系统推荐
- Docker进行资源隔离
- CloudFlare 客户端证书的使用
- 数组转树形结构只需两步
- 是时候使用MapStruct替代BeanUtils了
- 数据同步方案
- JDK8 G1 堆内存居然不释放
- InnoDB存储引擎
- AQS源码解读
- 多台centos服务器,文件互相备份
- 分布式事务Seata
- Hbase 总览
- 表单重复提交解决方案
- 随机毒鸡汤:头这么疼,一定是有人在压榨我的智慧。

