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

文章目录

一、技术方案
二、前端具体实现

一、技术方案

后台返回 base64 数据

typescript 复制代码

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

前端进行数据格式转化并下载成 Excel 文件

这篇文章主要介绍第二个步骤的实现。

二、前端具体实现

代码

src/utils/transformat.ts

typescript 复制代码

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

typescript 复制代码

 const handleDownload = (file: Blob) => {
     const fileName = `test_${Date.now()}.xlsx`
     const element = document.createElement("a")
     element.href = URL.createObjectURL(file)
     element.download = fileName
     document.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 可以用来处理：

atob / btoa
- atob(base64)：把 base64 字符串解码为普通字符串（二进制仍然是字符串形式）。
- btoa(string)：把字符串编码为 base64。
- ⚠️ 注意：只能处理 非 UTF-8 的 ASCII 字符，遇到中文等多字节字符会报错。

Blob

接着可以把 Uint8Array、ArrayBuffer 转成 Blob。

下载文件时常用：

ts 复制代码

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

URL.createObjectURL
- 最后把 Blob 转成一个临时的 URL，用于 <a> 下载。
  ts 复制代码
```
const url = URL.createObjectURL(blob);
```

注意事项

MIME 类型要正确，Excel 用：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
PDF 用：application/pdf
base64 一般比较大，建议后端尽量返回二进制（Blob 流），效率更高。
如果后端要传 base64，最好用 gzip 压缩后再传，否则网络传输会膨胀 30% 左右。