Vue前端导出Excel乱码解决：BOM头与Blob的正确用法

问题现象与原因分析

在使用PHP的PhpSpreadsheet或类似库生成表格数据后，前端使用Axios发起GET请求并设置responseType: 'blob'进行下载。此时若直接使用Chrome打开，可能无明显异常；但在其他编辑器或特定软件中查看时，内容正常。然而，当尝试用微软Office（如Excel）或WPS打开时，往往会发现中文全部变成乱码。

造成这一差异的核心原因在于微软自家的编码识别机制：Windows记事本及Office套件在保存UTF-8文件时，习惯性地要求在文件头部插入“UTF-8 BOM”标记。\uFEFF即为BOM字符。如果下载的纯文本流开头没有这个不可见的标记，微软软件会将其默认为ANSI或其他编码格式，从而导致乱码。

此前部分开发者尝试修改Blob的type参数来指定编码，但这是无效的。Blob的type仅表示MIME类型，不参与底层二进制数据的转码。真正的解决方案是在构造Blob时，在原始数据流的最前面拼接\uFEFF字符串。

完整解决方案与代码实现

第1步：配置请求参数

确保后端接口已输出正确的charset=UTF-8响应头。在前端请求中，必须将responseType设置为'blob'，以接收二进制数据而非解析后的JSON字符串。

第2步：前端数据处理与下载触发

在后端的.then()回调中，拿到res.data（Blob对象）。我们需要创建一个新的Blob，将BOM字符与原有数据合并，并指定正确的MIME类型。随后通过创建临时<a>标签的方式触发浏览器下载。

this.$http.get('/api/exportExcel', {
  params: { /* 你的查询参数 */ },
  responseType: 'blob'
}).then((res) => {
  if (res.data) {
    // 1. 创建a标签元素用于模拟点击下载
    const link = document.createElement('a');
    
    // 2. 核心修复：在数据前追加 \uFEFF (BOM头)，解决Office乱码
    let blob = new Blob(['\uFEFF' + res.data], { type: 'application/vnd.ms-excel' });
    
    // 3. 创建本地URL
    link.href = URL.createObjectURL(blob);
    
    // 4. 设置下载文件名（建议保留后缀.csv或.xls）
    link.setAttribute('download', `数据_${new Date().getTime()}.csv`);
    link.style.display = "none";
    
    // 5. 触发点击并清理DOM
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
});

注意事项

• 文件扩展名：虽然本质是CSV（逗号分隔值），但为了获得更好的单元格支持，建议在PHP后端或前端下载时，将后缀名设为.csv或.xls。Office对这两种格式的BOM识别最为敏感。
• 备用方案：如果项目中使用了专门的文件下载插件（如vxe-table的文件导出方法或自定义封装的this.$fileDownload），请确认这些工具内部是否已经处理了BOM逻辑。若未处理，则需采用上述手动组装Blob的方式。
• MIME类型：在Blob构造函数中，type参数应填写application/vnd.ms-excel或application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，以保证操作系统关联到对应的办公软件。

以上就是Vue前端导出Excel出现乱码的详细解决方法，更多关于PHP导出CSV及前端Blob处理的资料请关注本站其它相关文章！