vue 导出 Excel 乱码
时间: 2025-03-26 18:14:46 浏览: 49
### Vue 导出 Excel 乱码解决方案
在处理 Vue 项目中的 Excel 文件导出时遇到乱码问题,通常是因为编码设置不当或响应类型配置错误所致。
当从服务器获取到二进制数据并尝试将其作为 Excel 文件保存时,如果未正确处理字符集转换,则可能导致文件内容显示异常。对于 `Blob` 对象创建过程中指定 MIME 类型加上字符集的方式可能无法有效防止乱码现象[^1]。
更有效的做法是在请求头中加入合适的 Accept-Encoding 字段,并确保服务端返回的数据确实是按照 UTF-8 编码的纯文本形式。另外需要注意的是,某些情况下 mock 数据库可能会干扰实际 HTTP 请求的行为,特别是改变了 XMLHttpRequest 的 responseType 属性值为 '' ,这会影响浏览器如何解析接收到的内容,从而引发乱码或其他兼容性问题[^4]。
为了彻底解决这个问题,建议采取以下措施:
#### 修改 MockJS 设置
针对由 MockJS 引起的问题,可以通过调整其源代码来修复:
```javascript
// node_modules/mockjs/dist/mock.js 中找到相应位置添加此行代码
this.custom.xhr.responseType = 'arraybuffer'; // 或者根据实际情况选择其他合适类型
```
#### 正确构建 Blob 实例
确保使用正确的 MIME 类型初始化 Blob 对象,同时考虑是否需要额外转义特殊字符:
```javascript
const blob = new Blob([data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
```
此外,还可以尝试利用第三方库如 SheetJS (xlsx) 来简化整个过程,它提供了更好的跨平台支持和更多的功能选项。
阅读全文
相关推荐
















