背景:使用Easypoi生成 .xlsx格式的Excel文档
后端实现代码
response.setCharacterEncoding("UTF-8");
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
// 错误的
//response.setHeader("Content-Type", "application/vnd.ms-excel;charset=utf-8");
// 正确的
response.setHeader("Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode( "导出文件名称.xlsx", "UTF-8"));
前端实现代码:
//错误的
//var blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
//正确的
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
HTTP Content-Type 对照表(部分)
| 扩展名 | Content-Type |
|---|---|
| .xls | application/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
原因:
如果实际开发中遇见这个问题,看到这里大家应该已经知道原因了。
Axios获取到Blob的时候要设置正确的Type。实际开发中可以通过后端返回的Header Conten-Type进行设置。这样能保证前后端类型对齐。



