Я хочу получить файл csv из входного тега и преобразовать данные файла csv в объект json. Есть ли какой-либо плагин в react js или какой-либо пользовательский код?

-1
Rushikesh Shirkar 12 Июн 2021 в 18:43

2 ответа

Лучший ответ

Вы можете использовать внешнюю библиотеку, например 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>
  );
}
0
junkie 12 Июн 2021 в 16:10

Вы можете сослаться на эту ссылку ниже.

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

В методе handleOnFileLoad вы получите данные, полученные из файла csv. Вы получите ответ в формате JSON прямо оттуда. Приведенная выше ссылка не поддерживает формат XLXS. Для этого вам понадобится еще один пакет npm.

0
Chandra Shekar 12 Июн 2021 в 15:55