React + Vite：用Fetch将.csv大文件数据转成JSON字符串

🚀 React + Vite：用 Fetch 将 CSV 文件数据转成 JSON 字符串

🏕 背景

在一些小型项目中，前端可能需要直接处理 CSV 文件数据，将其转换为 JSON 字符串后再进行逻辑操作和展示。本文将会介绍两种方法。

🌄 方法1：将 CSV 放在public目录下，用fetch读取

代码实现

工具函数：csv -> json

// src/utils/csvParser.jsx
const csvParser = async ({ file }) => {
  try {
    const resp = await fetch(file);
    if (!resp.ok) {
      throw new Error(`HTTP ${resp.status}`);
    }

    const text = await resp.text(); // 转成文本
    const lines = text.trim().split(/\r?\n/); // 每一行作为数组一个元素
    const header = lines[0].split(","); // 把表头单独提取出来

    const data = lines.slice(1).map((line) => {
      const values = line.split(","); // 具体每一行数据的值
      const row = {}; // 最终数据下的逐行的载体
      header.forEach((h, i) => {
        row[h] = values[i] ?? "";
      });
      return row;
    });
    return data;
  } catch (error) {
    console.log(error);
    return [];
  }
};

export default csvParser;

在 React 中使用

// src/pages/Home.jsx
import { useEffect } from "react";
import { csvParser } from "@/utils";

const Home = () => {
  const loadcsv = async () => {
    const data = await csvParser({ file: "/testInfo.csv" });
    console.log(data);
  };
  useEffect(() => {
    loadcsv();
  }, []);

  return <div></div>;
};

export default Home;

注意事项

我们应该将所需要的 CSV 文件放在public目录下而非src/assets目录下，采取直接调用。

当 CSV 放在src/assets下并通过import或模块方式加载时， Vite 会将其打包成模块路径，fetch实际请求的是开发服务器的模块入口。对于大文件，这会导致请求头中包含过多信息，从而触发 431 错误。

P.S. 如果忘记了fetch的具体用法...传送门

🌄 方法2：利用 Rollup 插件直接 import CSV

由于 Vite 的底层构建引擎包含 Rollup，我们可以直接利用 Rollup 的官方插件生态来扩展功能，直接将 CSV 文件作为模块导入。

代码实现

安装开发依赖：

npm i -D @rollup/plugin-dsv

配置vite

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dsv from "@rollup/plugin-dsv";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), dsv()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

在 React 中使用

// src/pages/Home.jsx
import data from "@/assets/testInfo.csv";

const Home = () => {
  console.log(data)
  return <div></div>;
};

export default Home;

注意事项

适用于小文件，较大文件、关注性能的话还是更推荐使用第一种。

🚉 结语

在 React + Vite 项目中处理 CSV 文件时，选择合适的加载方式非常重要：

• 小文件：可以直接通过 import 导入，开发快速方便。
• 大文件：推荐放在 public 目录，用 fetch 异步加载，并结合分页或虚拟渲染，保证性能和稳定性。

掌握这两种方法后，你可以根据项目需求灵活处理不同规模的 CSV 数据，让前端数据处理既高效又安全。