HOW - 在浏览器下载一个 Excel 表格文件

一、技术方案

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% 左右。