reactjs - 如何使用react.js上传Excel工作表文件并将数据显示到表格

Question

我是 React JS 新手。我正在尝试使用react.js上传Excel工作表文件并将数据显示到表格中。我有链接中的部分引用，但并不完整。请帮忙解决一下。 Importing data from excel and displaying in a react component

Answer 1

react-excel-渲染器

有一个完美的库专门用于此目的!它首先将 Excel 数据转换为 JSON，然后将其呈现为 HTML 表。它的名字叫 react-excel-renderer

• 安装它 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" />

就是这样!完成了!

可以找到相同的演示 here