React+TypeScript项目中如何点击UI下载本地存储的.xlsx等项目文件

首先纠正误区：href属性不仅支持外部链接，也支持项目内的静态资源相对/绝对路径，完全可以用来下载本地项目存储的文件。

前置准备 #

把你要下载的.xlsx文件放到项目的public目录下（Vite、Create React App创建的React项目都遵循这个规范），比如路径为public/assets/数据表.xlsx。public目录下的文件会在构建时原样输出到最终的产物目录，不会被打包工具编译处理，可直接通过路径访问。

实现方式 #

方式1：直接使用<a>标签 #

最简单的实现，无需额外JS逻辑：

<a 
  href="/assets/数据表.xlsx" 
  download="业务数据表.xlsx"
>
  下载Excel表格
</a>

• download属性为可选参数，填写后用户下载时的默认文件名会使用你设置的值，不填则默认使用源文件名称。

方式2：按钮点击触发下载 #

如果你需要用按钮样式，不想用原生a标签的默认样式，可以通过动态创建a标签的方式实现：

import React from 'react'

const DownloadButton: React.FC = () => {
  const handleDownload = () => {
    const link = document.createElement('a')
    // 对应public目录下的文件路径
    link.href = '/assets/数据表.xlsx'
    link.download = '业务数据表.xlsx'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

  return (
    <button onClick={handleDownload}>
      下载Excel表格
    </button>
  )
}

export default DownloadButton

注意事项 #

• 如果你的项目部署在域名的子路径下（比如https://domain.com/your-project/），需要拼接项目基础路径，Vite项目可以直接使用import.meta.env.BASE_URL：

  link.href = `${import.meta.env.BASE_URL}assets/数据表.xlsx`
  

• 如果文件存放在src目录下，也可以通过import引入后使用：

  import excelFile from './assets/数据表.xlsx'
  
  // 直接将导入的值赋值给href即可
  <a href={excelFile} download="业务数据表.xlsx">下载</a>
  

  这种方式适合体积较小的文件，大文件还是建议放在public目录避免占用打包体积。
• download属性仅对同域资源生效，你项目内的本地静态资源都属于同域资源，可以正常使用；如果后续需要下载跨域资源，需要后端配置Content-Disposition响应头实现下载。

内容的提问来源于stack exchange，提问作者skate_23