从Excel导入数据并显示在React组件中 [英] Importing data from excel and displaying in a react component
本文介绍了从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组件中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文