在React应用中如何读取项目内置的本地CSV文件数据

fs是Node.js专属的服务端模块，浏览器环境没有提供对应的实现，所以无法使用。以下两个方案都是浏览器兼容的实现，无需用户手动上传文件：

方案1：使用public目录+原生fetch（无需额外依赖、无需修改配置） #

这是成本最低的实现方式，步骤如下：

• 把你存放在src目录下的data.csv移动到项目根目录的public文件夹中
• 在按钮触发的函数中直接用fetch请求该文件，拿到内容后处理即可
• 如果你的项目部署在域名子路径下，需要把fetch路径前加上对应子路径前缀

代码示例：

const handleReadCsv = async () => {
  try {
    // 部署在根路径直接写文件名即可
    const response = await fetch('/data.csv');
    // 读取CSV的纯文本内容
    const csvText = await response.text();
    // 打印原始内容到控制台
    console.log('原始CSV内容：', csvText);
    
    // 可自行拆分处理数据，比如按行拆分、按逗号分隔字段
    const rows = csvText.split('\n').map(row => row.split(','));
    console.log('结构化后的数据：', rows);
    // 此处可添加你需要的计算、过滤等业务逻辑
  } catch (err) {
    console.error('读取CSV文件失败：', err);
  }
}

方案2：CSV保留在src目录下，使用专用解析库（适合复杂处理需求） #

如果需要把CSV文件保留在src目录，或者需要自动识别表头、类型转换、空值过滤等复杂解析能力，可以使用纯前端兼容的papaparse库实现，步骤如下：

• 安装依赖和对应的TypeScript类型声明

npm install papaparse
npm install -D @types/papaparse

• 在src目录下新建csv.d.ts类型声明文件，解决TS无法识别CSV文件的问题：

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

• 在组件中引入CSV文件和解析库，在点击函数中直接解析即可：

import Papa from 'papaparse';
// 按你实际的CSV文件路径调整
import csvFile from './data.csv';

const handleReadCsv = () => {
  Papa.parse(csvFile, {
    header: true, // 自动将第一行作为表头，返回对象数组而非二维数组
    complete: (results) => {
      console.log('解析完成的结构化数据：', results.data);
      // 此处添加你的业务处理逻辑
    },
    error: (err) => {
      console.error('CSV解析失败：', err);
    }
  })
}

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