excel - 从 Excel 导入数据并在 React 组件中显示

Question

我正在尝试导入一个包含具有不同数据集的多列的 Excel 工作表，并将其显示在 React 组件中。

目前我正在做，

<ReactFileReader handleFiles={this.handleFiles} fileType={'.xlsx'}>
    <button>Import</button>
    </ReactFileReader>

然后

 handleFiles = files =>{
    var fileDisplayArea = this.refs.fileDisplayArea;
    var reader = new FileReader();
    reader.onload = function(e){
    fileDisplayArea.innerHTML = reader.result;
    }
    reader.readAsText(files[0], 'utf-8');
    }

虽然这会导入文件，但在渲染时它会显示所有垃圾字符。任何帮助将不胜感激。

谢谢

维克拉姆

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