React+Vite中利用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;

// 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;

npm i -D @rollup/plugin-dsv

// 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"),
    },
  },
});

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

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

export default Home;