Как загрузить файл листа Excel с помощью response.js и отобразить данные в таблицу

Question

Я новичок в реакции JS. Я пытаюсь выполнить загрузку файла листа Excel с использованием response.js и отобразить данные в таблицу. я получил частичная ссылка по ссылке, но она не является полной. Пожалуйста, помогите с этим. Импорт данных из Excel и отображение в реагирующем компоненте

Answer 1

Я добился успеха, используя xlsx для чтения листов файлов Excel. Просто сделайте что-то вроде этого:

import excel from 'xlsx';
let fileName = "newData.xlsx";
let workbook = excel.readFile(fileName);
console.log(workbook) //should print an array with the excel file data

при условии, что электронная таблица с именем 'newData.xlsx' находится в корневой папке. Тогда нужно просто выяснить, как получить доступ к нужным данным. Это также должно быть полезно.

Answer 2

реагировать-первенствовать-визуализатор

Для этого есть идеальная библиотека! Сначала он преобразует данные Excel в JSON, а затем преобразует их в таблицу HTML. Его называют реагировать-превосходить-рендерер

• Установите его npm install react-excel-renderer --save

• Импорт обоих компонентов ExcelRenderer и OutTable

  import {ExcelRenderer, OutTable} from 'react-excel-renderer';

• Предоставьте объект файла для функции ExcelRenderer в вашем обработчике событий

    fileHandler = (event) => {
  let fileObj = event.target.files[0];
  
  //just pass the fileObj as parameter
  ExcelRenderer(fileObj, (err, resp) => {
    if(err){
      console.log(err);            
    }
    else{
      this.setState({
        cols: resp.cols,
        rows: resp.rows
      });
    }
  });               
  
  }
  

• Как только JSON получен, предоставьте его компоненту OutTable
  <OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

Вот и все! Готово!

Демо для того же можно найти здесь

Answer 3

Вы можете использовать библиотеку, например https://react -dropzone.js.org / для загрузки файлов, а затем использовать библиотеку https://github.com/felixrieseberg/React-Spreadsheet-Component для ее отображения.