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 或聯調后端修復數據源。