How to upload an Excel sheet file using react.js and display data to a table

问题

I am new to react JS. I am trying to perform uploading Excel sheet file using react.js and display data to a table. I got partial reference from the link but, it is not complete. Please help with it. Importing data from excel and displaying in a react component

回答1:

You can use the library like https://react-dropzone.js.org/ to upload files and then use https://github.com/felixrieseberg/React-Spreadsheet-Component library to display it.

回答2:

react-excel-renderer

There's a perfect library exactly for this ! It converts the excel data to JSON first, then renders it into a HTML table. Its called react-excel-renderer

Install it npm install react-excel-renderer --save
Import both components ExcelRenderer and OutTable

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

Provide the file object to the ExcelRenderer function in your event handler

  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
    });
  }
});               

}

Once JSON is obtained, provide it to the OutTable component
<OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

Thats it ! Its done !

A demo for the same can be found here

回答3:

I've had success with this using xlsx to read excel file sheets. Just do something like this:

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

assuming a spreadsheet with name 'newData.xlsx' in your root folder. Then its just a matter of figuring out how to access the data you want. This should also be helpful.

来源：https://stackoverflow.com/questions/51084434/how-to-upload-an-excel-sheet-file-using-react-js-and-display-data-to-a-table

标签

reactjs

import-from-excel