如何将 csv 文件数据转换为 reactjs 中的 json 对象？答案

【问题标题】：How to convert csv file data to json object in reactjs?如何将 csv 文件数据转换为 reactjs 中的 json 对象？
【发布时间】：2021-06-13 00:10:39
【问题描述】：

我想从输入标签中获取 csv 文件并将 csv 文件的数据转换为 json 对象。 react js中是否有插件或自定义代码？

【问题讨论】：

嗨试试这个网址stackoverflow.com/questions/61723056/…

标签： javascript reactjs csvtojson

【解决方案1】：

您可以使用 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,.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>
  );
}

【讨论】：

【解决方案2】：

您可以参考以下链接。

https://www.npmjs.com/package/react-papaparse

在 handleOnFileLoad 方法中，您将收到从 csv 文件中获取的数据。您将直接从那里获得 JSON 响应。以上链接不支持 xlxs 格式。你需要为它准备另一个 npm 包。

【讨论】：