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

夙愿已清 提交于 2021-01-20 18:38:27

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!