遇到前端导出 Excel 文件出现乱码或文件损坏的问题

1. 检查后端返回的数据格式

• 确认接口响应：确保后端返回的是二进制流（如 ArrayBuffer）或 Base64 编码的 Excel 文件，而非 JSON 字符串。

  • 用浏览器开发者工具（Network 标签）检查接口响应类型：

    • 正确的 Content-Type 应为 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet（xlsx）或 application/vnd.ms-excel（xls）。

    • 响应体应为二进制（非可读文本）。

2. 前端正确处理二进制数据

方案 1：直接下载（推荐）

如果后端返回的是文件流，前端无需手动生成文件，直接触发下载：

// 假设使用 axios
axios.get('/api/export', {
  responseType: 'blob', // 关键：指定响应类型为 Blob
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'data.xlsx');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

方案 2：手动构造 Blob

如果后端返回的是 Base64 编码：

const base64Data = '后端返回的Base64字符串';
const byteCharacters = atob(base64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

// 触发下载（同方案1）

3. 编码问题处理

乱码的可能原因

• 响应头缺失：后端未设置 Content-Disposition 或 Content-Type。

• 前端未正确解码：如 Base64 解码错误或字符集不匹配。

解决方案

• 强制设置编码（适用于乱码）：

  const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });

  检查文件名编码：如果文件名乱码，后端需在 Content-Disposition 中编码文件名：

  Content-Disposition: attachment; filename*=UTF-8''%E6%95%B0%E6%8D%AE.xlsx

  4. 常见错误排查

  问题现象	可能原因	解决方案
  文件损坏，无法打开	Blob 类型错误或数据截断	检查 responseType: 'blob' 和响应数据完整性
  文件名乱码	响应头未编码文件名	后端设置 filename*=UTF-8''xxx
  浏览器直接显示乱码文本	未正确识别为二进制流	确保 Content-Type 和 responseType 匹配
  文件内容为 JSON 文本	后端实际返回了 JSON 数据	检查接口逻辑，确保返回文件流

  5. 测试工具验证

• 使用 Postman 或 Curl 直接请求接口：
  确认下载的文件是否正常。如果后端返回的文件本身有问题，需优先修复后端。

• 对比前后端文件：
  用二进制工具（如 Hex Editor）比较前后端生成的文件，确认是否一致。

6. 终极备用方案

如果以上方法无效，尝试纯前端生成 Excel（适用于数据量小的场景）

import * as XLSX from 'xlsx'; // 使用 sheetjs 库

const data = [[“姓名”, “年龄”], [“张三”, 25]];
const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "export.xlsx");

总结步骤

1. 确认后端返回的是二进制流（非 JSON）。

2. 前端指定 responseType: 'blob'。

3. 正确构造 Blob 并设置 MIME 类型。

4. 检查响应头编码和文件名。

5. 如仍失败，换用纯前端库生成 Excel 或联调后端修复数据源。