React JS中创建CSV下载链接点击提示无文件错误如何解决

你将CSV文件存放在了src目录下，React项目的构建工具（Webpack/Vite等）默认不会把src目录下未被显式导入的静态资源打包到最终产物中，浏览器访问你填写的/src/xxx.csv路径时找不到对应文件，因此触发「无文件」下载错误。

方案1：将CSV放入public目录（推荐静态资源用这种方式） #

1. 把你的annual-enterprise-survey-2020-financial-year-provisional-csv.csv文件移动到项目根目录的public文件夹内
2. 修改a标签的href属性，直接填写对应文件名即可，修改后代码如下：

function App() {
  return (
    <div className="App">
     <a 
       href="/annual-enterprise-survey-2020-financial-year-provisional-csv.csv" 
       target="_blank" 
       download="annual-enterprise-survey-2020-financial-year-provisional-csv.csv"
     > 
       Sample refund file 
     </a>
    </div>
  );
}

export default App;

方案2：保留CSV在src目录，手动导入 #

如果不想把文件放在public目录，可以通过导入的方式让构建工具识别该资源，自动生成正确的访问路径：

1. 在App组件顶部导入CSV文件
2. 将a标签的href属性绑定为导入的变量，修改后代码如下：

// 路径请根据你CSV文件在src下的实际存放位置调整
import CsvFile from './annual-enterprise-survey-2020-financial-year-provisional-csv.csv'

function App() {
  return (
    <div className="App">
     <a 
       href={CsvFile} 
       target="_blank" 
       download="annual-enterprise-survey-2020-financial-year-provisional-csv.csv"
     > 
       Sample refund file 
     </a>
    </div>
  );
}

export default App;

如果你用的是Typescript，可能会遇到「找不到CSV模块」的报错，在src目录新建csv.d.ts类型声明文件，添加如下内容即可：

declare module '*.csv' {
  const value: string;
  export default value;
}

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