React+Vite中利用Fetch將CSV數(shù)據(jù)轉(zhuǎn)成JSON字符串
背景
在一些小型項(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ú)提取出來(lái)
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下并通過(guò)import或模塊方式加載時(shí), Vite 會(huì)將其打包成模塊路徑,fetch實(shí)際請(qǐng)求的是開發(fā)服務(wù)器的模塊入口。對(duì)于大文件,這會(huì)導(dǎo)致請(qǐng)求頭中包含過(guò)多信息,從而觸發(fā) 431 錯(cuò)誤。
方法2:利用 Rollup 插件直接importCSV
由于 Vite 的底層構(gòu)建引擎包含 Rollup,我們可以直接利用 Rollup 的官方插件生態(tài)來(lá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;
注意事項(xiàng)
適用于小文件,較大文件、關(guān)注性能的話還是更推薦使用第一種。
結(jié)語(yǔ)
在 React + Vite 項(xiàng)目中處理 CSV 文件時(shí),選擇合適的加載方式非常重要:
- 小文件:可以直接通過(guò)
import導(dǎo)入,開發(fā)快速方便。 - 大文件:推薦放在
public目錄,用fetch異步加載,并結(jié)合分頁(yè)或虛擬渲染,保證性能和穩(wěn)定性。
掌握這兩種方法后,你可以根據(jù)項(xiàng)目需求靈活處理不同規(guī)模的 CSV 數(shù)據(jù),讓前端數(shù)據(jù)處理既高效又安全。
以上就是React+Vite中利用Fetch將CSV數(shù)據(jù)轉(zhuǎn)成JSON字符串的詳細(xì)內(nèi)容,更多關(guān)于React Vite利用Fetch將CSV轉(zhuǎn)JSON的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決react中useState狀態(tài)異步更新的問(wèn)題
本文主要介紹了react中useState狀態(tài)異步更新的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過(guò)程
這篇文章主要介紹了React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過(guò)程,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
React創(chuàng)建組件的三種方式及其區(qū)別
本文主要介紹了React創(chuàng)建組件的三種方式及其區(qū)別,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
React狀態(tài)管理中的循環(huán)更新陷阱與解決方案
在前端開發(fā)中,我們經(jīng)常遇到這樣的場(chǎng)景:需要根據(jù)初始數(shù)據(jù)自動(dòng)回顯UI狀態(tài),但數(shù)據(jù)需要分批異步加載,這時(shí)容易陷入一個(gè)經(jīng)典的狀態(tài)同步循環(huán)陷阱,所以本文給大家介紹了,React 狀態(tài)管理中的循環(huán)更新陷阱與解決方案,需要的朋友可以參考下2025-10-10
React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能
創(chuàng)建一個(gè)組件,實(shí)時(shí)展示時(shí)分秒,并且動(dòng)態(tài)更新數(shù)據(jù),這篇文章主要介紹了React實(shí)現(xiàn)過(guò)渡效果更新時(shí)間展示功能,需要的朋友可以參考下2024-07-07
react項(xiàng)目如何運(yùn)行在微信公眾號(hào)
這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào),幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下2021-04-04
react實(shí)現(xiàn)記錄拖動(dòng)排序
這篇文章主要介紹了react實(shí)現(xiàn)記錄拖動(dòng)排序的相關(guān)資料,需要的朋友可以參考下2023-07-07
react 實(shí)現(xiàn)頁(yè)面代碼分割、按需加載的方法
本篇文章主要介紹了react 實(shí)現(xiàn)頁(yè)面代碼分割、按需加載的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04

