一、问题背景
通过 Postman 调用 API 时返回的 buffer 正常,下载下来的 Excel 也能正常打开,数据正常,但是在 Vue 项目中导出的 Excel 却报错 “文件已损坏,无法打开”。
1、Postman buffer 返回正常
2、Postman 导出 Excel 正常
3、Vue 导出 Excel 文件损坏
二、问题分析与解决
Postman 能正常导出并且预览说明数据传输没问题,需要从前端看一下是不是前端有问题。后端返回的是 buffer 数据,也就是二进制数据,但是接口传输一般返回的都是字符串,所以首先需要排查的就是返回数据格式是否正确,如果是字符串的话,再转二进制肯定有问题。
1、排查请求返回数据格式
在前端的 axios 中找到 response.use,并 log 出我们的 response,查看 response 中的数据格式。
这里可以看到 response 中的 responseType 是空,同时返回的是数据格式为字符串,而不是
blob,这个时候我们就需要处理我们的请求,给我们的请求头上加上
responseType="blob"
属性,再来看我们的请求返回的数据格式是否正确。
2、问题解决
给 axios 请求头上加入 responseType 属性,值是blob
如果你是uni.request,则responseType 属性,值是arraybuffer:
给请求头加上 responseType 后再来查看接口返回的数据格式
这里可以看到 response 中的 responseType 是 blob,同时 response 返回的也是 Blob 数据,此时我们再打开导出的 Excel
此时 Excel 能正常打开并且预览,大功告成!
3、总结
前端在导出 Excel 表时需要将请求中的 responseType 设置为 blob,之后才正常的接受并导出,否则接口会将 buffer 转为 String,这时转换导出的数据就是异常数据,所以打开文件才会报错文件损坏。