如何实现XLSX文件下载？项目资产文件下载报错求助

问题根源 #

1. 代码结构错误：你把<a>标签的href属性单独书写，未正确闭合<a>标签；且在<button>内嵌套<a>的写法会导致事件冲突，不符合规范。
2. 路径问题：静态资源引用路径大小写不匹配（比如实际目录是assets，代码中写Assets），或者框架打包规则导致相对路径无法解析，触发"module not found"错误。
3. 缺少下载触发属性：未添加download属性，浏览器可能尝试直接打开文件而非触发下载。

修复方案 #

针对React项目 #

方式1：通过import引入资源

先导入文件，再绑定到<a>标签的href上，同时添加download属性：

// 注意路径大小写与实际目录一致
import uploadFormat from '../../../assets/file/form_upload_lead.xlsx';

// 组件内使用
<a 
  href={uploadFormat} 
  download 
  className='p-2 bg-green-600 my-3 text-white inline-block'
>
  Download Format Upload
</a>

方式2：使用public目录存放资源

将文件移至项目根目录的public/assets/file/下，直接用绝对路径引用：

<a 
  href='/assets/file/form_upload_lead.xlsx' 
  download 
  className='p-2 bg-green-600 my-3 text-white inline-block'
>
  Download Format Upload
</a>

针对Vue项目 #

方式1：使用@别名引用资源

借助Vue的路径别名@指向src目录，通过require加载资源：

<template>
  <a 
    :href="require('@/assets/file/form_upload_lead.xlsx')" 
    download 
    class="p-2 bg-green-600 my-3 text-white"
  >
    Download Format Upload
  </a>
</template>

方式2：public目录存放资源

将文件放到public/assets/file/下，使用绝对路径：

<template>
  <a 
    href="/assets/file/form_upload_lead.xlsx" 
    download 
    class="p-2 bg-green-600 my-3 text-white"
  >
    Download Format Upload
  </a>
</template>

核心注意点 #

• 严格匹配路径大小写：打包工具（如Webpack）对路径大小写敏感，必须与实际目录完全一致。
• 移除<button>嵌套：直接给<a>标签添加按钮样式即可，避免事件冲突。
• 必须添加download属性：强制浏览器触发下载行为，而非尝试打开文件。

内容的提问来源于stack exchange，提问作者Dinda Difa Maharani