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)求的是開(kāi)發(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)
安裝開(kāi)發(fā)依賴(lài):
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)入,開(kāi)發(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)文章
JavaScript的React框架中的JSX語(yǔ)法學(xué)習(xí)入門(mén)教程
這篇文章主要介紹了JavaScript的React框架中的JSX語(yǔ)法學(xué)習(xí)入門(mén)教程,React是由Facebook開(kāi)發(fā)并開(kāi)源的高人氣js框架,需要的朋友可以參考下2016-03-03
react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了react native實(shí)現(xiàn)監(jiān)控手勢(shì)上下拉動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05
react項(xiàng)目自行配置熱更新的實(shí)現(xiàn)
本文主要介紹了react項(xiàng)目自行配置熱更新的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細(xì)介紹了如何在React中優(yōu)雅的使用addEventListener,文中的示例代碼簡(jiǎn)潔易懂,對(duì)大家學(xué)習(xí)React有一定的幫助,需要的可以參考一下2023-01-01
React Zustand狀態(tài)管理庫(kù)的使用詳解
Zustand是一個(gè)為React和瀏覽器環(huán)境設(shè)計(jì)的輕量級(jí)狀態(tài)管理庫(kù),由Vercel開(kāi)發(fā),它特點(diǎn)包括輕量級(jí)、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項(xiàng)目,Zustand還支持TypeScript,提供類(lèi)型安全的支持2024-09-09
Mobx實(shí)現(xiàn)React?應(yīng)用的狀態(tài)管理詳解
這篇文章主要為大家介紹了Mobx?實(shí)現(xiàn)?React?應(yīng)用的狀態(tài)管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實(shí)現(xiàn)
這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-02-02
React Native react-navigation 導(dǎo)航使用詳解
本篇文章主要介紹了React Native react-navigation 導(dǎo)航使用詳解,詳解的介紹了react-navigation導(dǎo)航的使用,具有一定的參考價(jià)值,有興趣的可以了解一下2017-12-12

