React+Vite中利用Fetch將CSV數(shù)據(jù)轉(zhuǎn)成JSON字符串

更新時(shí)間：2025年12月22日 08:56:56 作者：學(xué)高數(shù)就犯困

在一些小型項(xiàng)目中,前端可能需要直接處理 CSV 文件數(shù)據(jù),將其轉(zhuǎn)換為 JSON 字符串后再進(jìn)行邏輯操作和展示,本文將會(huì)介紹兩種方法,需要的朋友可以參考下

背景

在一些小型項(xiàng)目中，前端可能需要直接處理 CSV 文件數(shù)據(jù)，將其轉(zhuǎn)換為 JSON 字符串后再進(jìn)行邏輯操作和展示。本文將會(huì)介紹兩種方法。

方法1：將 CSV 放在public目錄下，用fetch讀取

代碼實(shí)現(xiàn)

工具函數(shù)：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(); // 轉(zhuǎn)成文本
    const lines = text.trim().split(/\r?\n/); // 每一行作為數(shù)組一個(gè)元素
    const header = lines[0].split(","); // 把表頭單獨(dú)提取出來

    const data = lines.slice(1).map((line) => {
      const values = line.split(","); // 具體每一行數(shù)據(jù)的值
      const row = {}; // 最終數(shù)據(jù)下的逐行的載體
      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;

注意事項(xiàng)

我們應(yīng)該將所需要的 CSV 文件放在public目錄下而非src/assets目錄下，采取直接調(diào)用。

當(dāng) CSV 放在src/assets下并通過import或模塊方式加載時(shí)， Vite 會(huì)將其打包成模塊路徑，fetch實(shí)際請(qǐng)求的是開發(fā)服務(wù)器的模塊入口。對(duì)于大文件，這會(huì)導(dǎo)致請(qǐng)求頭中包含過多信息，從而觸發(fā) 431 錯(cuò)誤。

方法2：利用 Rollup 插件直接importCSV

由于 Vite 的底層構(gòu)建引擎包含 Rollup，我們可以直接利用 Rollup 的官方插件生態(tài)來擴(kuò)展功能，直接將 CSV 文件作為模塊導(dǎo)入。

代碼實(shí)現(xiàn)

安裝開發(fā)依賴：

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;