一、技術方案

1. 后臺返回 base64 數據

{code: 0,data: "base64;...",
}

2. 前端進行數據格式轉化并下載成 Excel 文件

這篇文章主要介紹第二個步驟的實現。

二、前端具體實現

代碼

src/utils/transformat.ts

export function base64ToBlob(base64: string, mimeType) {const byteCharacters = atob(base64)const byteNumbers = new Array(byteCharacters.length)for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i)}const byteArray = new Uint8Array(byteNumbers)return new Blob([byteArray], { type: mimeType })
}

src/pages/test.tsx

 const handleDownload = (file: Blob) => {const fileName = `test_${Date.now()}.xlsx`const element = document.createElement("a")element.href = URL.createObjectURL(file)element.download = fileNamedocument.body.appendChild(element)element.click()document.body.removeChild(element)}
const onClick = () => {getFileContent(id).then((res) => {if (res.code === 0) {const blob = base64ToBlob(res.data,"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")handleDownload(blob)} else {console.error('download failed...')}})
}

分析

轉換邏輯

React 本身并沒有提供直接的 base64 → Blob → 下載 的 API，因為這是瀏覽器原生能力。但是瀏覽器里有幾個通用 API 可以用來處理：

1. atob / btoa

   • atob(base64)：把 base64 字符串解碼為普通字符串（二進制仍然是字符串形式）。
   • btoa(string)：把字符串編碼為 base64。
   • ?? 注意：只能處理 非 UTF-8 的 ASCII 字符，遇到中文等多字節字符會報錯。

2. Blob

   • 接著可以把 Uint8Array、ArrayBuffer 轉成 Blob。

   • 下載文件時常用：

     const blob = new Blob([uint8Array], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
     

3. URL.createObjectURL

   • 最后把 Blob 轉成一個臨時的 URL，用于 <a> 下載。

     const url = URL.createObjectURL(blob);
     

注意事項

• MIME 類型要正確，Excel 用：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
• PDF 用：application/pdf
• base64 一般比較大，建議后端盡量返回二進制（Blob 流），效率更高。
• 如果后端要傳 base64，最好用 gzip 壓縮后再傳，否則網絡傳輸會膨脹 30% 左右。