我想从input标签中获取csv文件,并将csv文件的数据转换为json对象。react js中是否有任何插件或自定义代码?
zour9fqk1#
您可以使用Papa Parse等外部库来解析CSV数据。类型为file的简单输入标记将用于读取CSV数据。
<input type="file" accept=".csv,.xlsx,.xls" onChange={handleFileUpload} />
请声明handleFileUpload函数,使用里面的库解析读取的数据。下面是一个示例,它将读取CSV文件并记录相应的JSON:
handleFileUpload
import Papa from "papaparse"; export default function App() { return ( <div className="App"> <input type="file" accept=".csv,.xlsx,.xls" onChange={(e) => { const files = e.target.files; console.log(files); if (files) { console.log(files[0]); Papa.parse(files[0], { complete: function(results) { console.log("Finished:", results.data); }} ) } }} /> </div> ); }
bhmjp9jg2#
我没有使用任何外部库来解析CSV文件。参考下面的代码:App.js文件
import React, { useState } from "react"; export default function App() { const [file, setFile] = useState(); const fileReader = new FileReader(); const handleOnChange = (e) => { // console.log(e.target); setFile(e.target.files[0]); // console.log(e.target.files[0]); }; const csvFileToArray = string => { var array = string.toString().split(" ") // console.log(array); here we are getting the first rows which is our header rows to convert it into keys we are logging it here var data = [] // console.log(data); for(const r of array){ // console.log(r); let row = r.toString().split(",") data.push(row) } console.log(data) var heading = data[0] // console.log(heading); to get the column headers which will act as key var ans_array = [] // console.log(ans_array); for(var i=1;i<data.length;i++){ var row = data[i] var obj = {} for(var j=0;j<heading.length;j++){ if(!row[j]){ row[j]="NA"; } // console.log(row[j].toString()) obj[heading[j].replaceAll(" ","_")] = row[j].toString().replaceAll(" ","_") } ans_array.push(obj) } console.log({ans_array}) }; const handleOnSubmit = (e) => { e.preventDefault(); if (file) { fileReader.onload = function (event) { const text = event.target.result; // console.log(event); // console.log(event.target.result); csvFileToArray(text); }; fileReader.readAsText(file); } }; return ( <div style={{ textAlign: "center" }}> <h1 style={{color:"red"}}>CSV PARSER</h1> <br></br> <form> <input type={"file"} id={"csvFileInput"} accept={".csv"} onChange={handleOnChange} /> <button onClick={(e) => { handleOnSubmit(e); }} > IMPORT CSV </button> </form> <br /> </div> ); }
在console中查看csv到json转换的输出。
ui7jx7zq3#
您可以参考下面的链接。https://www.npmjs.com/package/react-papaparse在handleOnFileLoad方法上,你会收到从csv文件中获取的数据。你会直接从那里得到一个JSON响应。上面的链接不支持xlxs格式。你需要有另一个npm包。
w80xi6nr4#
您可以使用Papaparse,它可以用于以下要求,
CSVReader-处理CSV文件输入并将其内容作为数组返回的React组件。CSVDownloader-呈现链接/按钮的React组件,单击该链接/按钮可以下载CSV格式的数据。readString-读取CSV逗号分隔字符串,并以数组形式返回内容的函数。readRemoteFile-读取远程CSV文件并以数组形式返回内容的函数。jsonToCSV-读取对象数组(JSON)并将其内容作为CSV逗号分隔字符串返回的函数。
在代码中,我使用它读取远程CSV文件并将其转换为JSON,import React from 'react';import React from 'react';import { usePapaParse } from 'react-papaparse';从'xlsx'导入xlsx;const { readRemoteFile } = usePapaParse();const link = 'link of csv';
const handleReadRemoteFile = () => { readRemoteFile(link, { header: true, complete: (results) => { const JsonObject = JSON.stringify(results); console.log(JsonObject); }, }); }; return < button onClick = { () => handleReadRemoteFile() } > readRemoteFile < /button>;
}你可以参考下面的链接。https://github.com/Raja-shekaran/React-papaparse-CSVTOJSON.git
4条答案
按热度按时间zour9fqk1#
您可以使用Papa Parse等外部库来解析CSV数据。
类型为file的简单输入标记将用于读取CSV数据。
请声明
handleFileUpload
函数,使用里面的库解析读取的数据。下面是一个示例,它将读取CSV文件并记录相应的JSON:
bhmjp9jg2#
我没有使用任何外部库来解析CSV文件。
参考下面的代码:
App.js文件
在console中查看csv到json转换的输出。
ui7jx7zq3#
您可以参考下面的链接。
https://www.npmjs.com/package/react-papaparse
在handleOnFileLoad方法上,你会收到从csv文件中获取的数据。你会直接从那里得到一个JSON响应。上面的链接不支持xlxs格式。你需要有另一个npm包。
w80xi6nr4#
您可以使用Papaparse,它可以用于以下要求,
CSVReader-处理CSV文件输入并将其内容作为数组返回的React组件。
CSVDownloader-呈现链接/按钮的React组件,单击该链接/按钮可以下载CSV格式的数据。
readString-读取CSV逗号分隔字符串,并以数组形式返回内容的函数。
readRemoteFile-读取远程CSV文件并以数组形式返回内容的函数。
jsonToCSV-读取对象数组(JSON)并将其内容作为CSV逗号分隔字符串返回的函数。
在代码中,我使用它读取远程CSV文件并将其转换为JSON,
import React from 'react';
import React from 'react';
import { usePapaParse } from 'react-papaparse';从'xlsx'导入xlsx;
const { readRemoteFile } = usePapaParse();const link = 'link of csv';
}
你可以参考下面的链接。
https://github.com/Raja-shekaran/React-papaparse-CSVTOJSON.git