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

问题描述：

我正在尝试导入具有多列具有不同数据集的Excel工作表，并将其显示在react组件中.

I am trying to import an excel sheet with multiple columns having different set of data and display it in a react component.

我现在正在做

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

尽管这会导入文件，但是在渲染时会显示所有垃圾字符. 任何帮助将不胜感激.

Although this imports the file but when rendered it displays all garbage characters. Any help would be much appreciated.

谢谢

维克拉姆

答

react-excel-renderer

为此有一个完美的库！它将首先将excel数据转换为JSON，然后将其呈现为HTML表.名为 react-excel-renderer

安装npm install react-excel-renderer --save
导入两个组件 ExcelRenderer 和 OutTable

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

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

在事件中将文件对象提供给ExcelRenderer函数处理程序

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

获得JSON后，将其提供给OutTable组件

<OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

就这样！完成了！

可以在此处

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

react-excel-renderer

相关推荐