React+Vite中利用Fetch将CSV数据转成JSON字符串
作者：学高数就犯困
在一些小型项目中,前端可能需要直接处理 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 错误。
方法2：利用 Rollup 插件直接importCSV
由于 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 数据，让前端数据处理既高效又安全。
以上就是React+Vite中利用Fetch将CSV数据转成JSON字符串的详细内容，更多关于React Vite利用Fetch将CSV转JSON的资料请关注脚本之家其它相关文章！