首先要准备react开发环境以及js-xlsx插件
1. 此处省略安装react安装步骤
2.下载js-xlsx插件
yarn add xlsx 或者 npm install xlsx
在项目中引入
import * as XLSX from 'xlsx';
- 定义插件，并暴露出去
/**
* @author tang*.programmer@gmail.com
* @apiNote excel预览插件
* @since 2019-02-14 10:36:42
*/
export default class Preview extends React.Component {
//...
}
- 定义全局变量，用于数据接收后重新渲染页面
state = {
tableData: [], // table的数据
tableHeader: [] // table的表头
};
- 通过render返回预览视图（用table表格预览数据，Table是使用的ant design）
render() {
return (
<div>
<Table columns={this.state.tableHeader} dataSource={this.state.tableData}/>
</div>
);
}
- 解析excel文件
uploadFilesChange(file) {
// 通过FileReader对象读取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {
const {result} = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, {type: 'binary'});
// 存储获取到的数据
let data = {};
// 遍历每张工作表进行读取（这里默认只读取第一张表）
for (const sheet in workbook.Sheets) {
let tempData = [];
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
console.log(sheet);
data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
}
}
const excelData = data.Sheet1;
const excelHeader = [];
// 获取表头
for (const headerAttr in excelData[0]) {
const header = {
title: headerAttr,
dataIndex: headerAttr,
key: headerAttr
};
excelHeader.push(header);
}
// 解析后的变量赋值给state，重新渲染table页面
// message.success('上传成功！')
this.setState({
tableData: excelData,
tableHeader: excelHeader,
})
console.log(this.state)
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
console.log(e);
// message.error('文件类型不正确！');
}
}
// 以二进制方式打开文件
fileReader.readAsBinaryString(file.file);
}
全部代码
（额外使用了ant design的Dragger、Table、message组件，实现拖拽点击上传）
import React from "react";
import * as XLSX from 'xlsx';
import antd, {message, Table} from 'antd'; const Dragger = antd.upload.Dragger; /**
* @author tang*.programmer@gmail.com
* @apiNote 音频、视频、excel、图片预览插件
* @since 2019-02-14 10:36:42
*/
export default class Preview extends React.Component {
state = {
tableData: [],
tableHeader: []
}; render() {
return (
<div>
<Dragger name="file"
beforeUpload={function () {
return false;
}}
onChange={this.uploadFilesChange.bind(this)}
showUploadList={false}>
<p className="ant-upload-text">
<span>点击上传文件</span>
或者拖拽上传
</p>
</Dragger>
<Table columns={this.state.tableHeader} dataSource={this.state.tableData}/>
</div>
);
} uploadFilesChange(file) {
// 通过FileReader对象读取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {
const {result} = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, {type: 'binary'});
// 存储获取到的数据
let data = {};
// 遍历每张工作表进行读取（这里默认只读取第一张表）
for (const sheet in workbook.Sheets) { let tempData = [];
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
console.log(sheet);
data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
}
}
const excelData = data.Sheet1;
const excelHeader = [];
// 获取表头
for (const headerAttr in excelData[0]) {
const header = {
title: headerAttr,
dataIndex: headerAttr,
key: headerAttr
};
excelHeader.push(header);
}
// 最终获取到并且格式化后的 json 数据
message.success('上传成功！')
this.setState({
tableData: excelData,
tableHeader: excelHeader,
})
console.log(this.state)
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
console.log(e);
message.error('文件类型不正确！');
}
}
// 以二进制方式打开文件
fileReader.readAsBinaryString(file.file);
} }
特别鸣谢：https://blog.csdn.net/twodogya/article/details/87892765
如有疑问，请在下面留言评论，或者私信我，请多多指教！
//