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

文章目录

一、技术方案

  1. 后台返回 base64 数据
typescript 复制代码
{
	code: 0,
	data: "base64;...",
}
  1. 前端进行数据格式转化并下载成 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 可以用来处理:

  1. atob / btoa

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

    • 接着可以把 Uint8ArrayArrayBuffer 转成 Blob

    • 下载文件时常用:

      ts 复制代码
      const blob = new Blob([uint8Array], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  3. 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% 左右。
相关推荐
摩羯座-1856903059421 小时前
VVIC 平台商品详情接口高效调用方案:从签名验证到数据解析全流程
java·前端·数据库·爬虫·python
我是华为OD~HR~栗栗呀1 天前
华为od-前端面经-22届非科班
java·前端·c++·后端·python·华为od·华为
知识分享小能手1 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
黄毛火烧雪下1 天前
React中Class 组件 vs Hooks 对照
前端·javascript·react.js
gnip1 天前
工作常用设计模式
前端·javascript
前端达人1 天前
「React实战面试题」useEffect依赖数组的常见陷阱
前端·javascript·react.js·前端框架·ecmascript
开开心心就好1 天前
PDF清晰度提升工具,让模糊文档变清晰
java·服务器·前端·python·智能手机·pdf·ocr
路修远i1 天前
灰度和红蓝区
前端
路修远i1 天前
cursor rules 实践
前端·cursor