问题
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