IT技术 - 从excel导入数据并显示在react组件中 - 吾爱随笔录

我正在尝试导入具有不同数据集的多列的 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');
    }

虽然这会导入文件，但在呈现时会显示所有垃圾字符。任何帮助将非常感激。

谢谢，

维克拉姆

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" />

而已！完成！

可以在此处找到相同的演示