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

Question

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

7

我是一位有用的助手，可以为您进行文本翻译。以下是您需要翻译的内容：

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

尽管导入了文件，但在呈现时显示了所有垃圾字符。非常感谢任何帮助。

谢谢，

Vikram

- Vikram Mahishi

2

你把本质上是zip归档文件的东西当作纯文本文件来处理，这样是行不通的：你需要使用一个可以解析xlsx文件并以有用方式呈现的库。 - Tim Williams

@TimWilliams：有道理！我想我应该将其解析为JSON，然后使用该输出来提供给ReactJS表格组件。非常感谢。祝您愉快！ - Vikram Mahishi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashish Deshpande · Accepted Answer

react-excel-renderer

有一个完美的库可以实现这个！它首先将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" />

就是这样！完成了！

可以在此处找到相应的演示。