问题描述
我想从输入标签中获取 csv 文件并将 csv 文件的数据转换为 json 对象。 react js 中是否有任何插件或任何自定义代码?
解决方法
您可以使用 Papa Parse 等外部库来解析 CSV 数据。
类型为文件的简单输入标签可用于读取 CSV 数据。
<input
type="file"
accept=".csv,.xlsx,.xls"
onChange={handleFileUpload}
/>
请声明handleFileUpload
函数并使用里面的库来解析读取的数据。
这是一个读取 CSV 文件并记录相应 JSON 的示例:
import Papa from "papaparse";
export default function App() {
return (
<div className="App">
<input
type="file"
accept=".csv,.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>
);
}
,
您可以参考以下链接。
https://www.npmjs.com/package/react-papaparse
在 handleOnFileLoad 方法中,您将接收从 csv 文件中获取的数据。您将直接从那里获得 JSON 响应。以上链接不支持 xlxs 格式。你需要有另一个 npm 包。