首先在项目中安装js-export-excel插件，进入项目目录，执行以下命令：
npm安装：npm install --save js-export-excel，
yarn安装：yarn add js-export-excel，
安装好之后，查看package.json文件夹中会在dependencies（生产环境依赖）对象中显示插件版本信息：
//package.json
"dependencies": {
"@antv/data-set": "^0.10.0",
"@babel/runtime": "^7.2.0",
"antd": "^3.11.6",
"bizcharts": "^3.4.2",
"bizcharts-plugin-slider": "^2.1.1-beta.1",
"chalk": "^2.4.2",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"enquire-js": "^0.2.1",
"hash.js": "^1.1.5",
"js-export-excel": "^1.1.2", //依赖安装完成后显示
"lodash": "^4.17.10",
"lodash-decorators": "^6.0.0",
"react": "^16.6.3",
"react-container-query": "^0.11.0",
"react-copy-to-clipboard": "^5.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.6.3",
"react-fittext": "^1.0.0",
"react-media": "^1.8.0",
"react-router-dom": "^4.3.1"
},
将table数据导出为excel文件的逻辑代码：
//index.jsx
import React, { PureComponent } from 'react';
import { Table, Button } from 'antd';
import { connect } from 'dva';
import { formatTime } from '@/utils/utils';
import ExportJsonExcel from 'js-export-excel';
@connect(state => {
return {
loading: state.loading.models.getRepaymentPlanList,
getRepaymentPlanList: state.getRepaymentPlanList,
};
})
export default class extends PureComponent {
//导出为excel文件的方法
downloadFileToExcel = () => {
const { getRepaymentPlanList } = this.props; //从props中获取数据源
let option = {}; //option代表的就是excel文件
let dataTable = []; //excel文件中的数据内容
if (getRepaymentPlanList && getRepaymentPlanList.length > 0) {
for (let i in getRepaymentPlanList) { //循环获取excel中每一行的数据
let _planDay = formatTime(getRepaymentPlanList[i].planDay, true); //格式化日期（自定义方法）
let obj = {
'还款期数': getRepaymentPlanList[i].planPeriod,
'计划还款日': _planDay,
'租金（元）': getRepaymentPlanList[i].currentAmount,
'还款本金': getRepaymentPlanList[i].currentPrinciple,
'还款利息': getRepaymentPlanList[i].currentInterest,
}
dataTable.push(obj); //设置excel中每列所获取的数据源
}
}
option.fileName = '实际还款计划'; //excel文件名称
option.datas = [
{
sheetData: dataTable, //excel文件中的数据源
sheetName: '实际还款计划', //excel文件中sheet页名称
sheetFilter: ['还款期数', '计划还款日', '租金（元）', '还款本金', '还款利息'], //excel文件中需显示的列数据
sheetHeader: ['还款期数', '计划还款日', '租金（元）', '还款本金', '还款利息'], //excel文件中每列的表头名称
}
]
let toExcel = new ExportJsonExcel(option); //生成excel文件
toExcel.saveExcel(); //下载excel文件
}
render() {
return (
<>
<h2 style={{ textAlign: 'center', fontSize: '24px' }}>实际还款计划</h2>
<div style={{ width: "80%", margin: "0 auto" }}>
<Button type="primary" onClick={this.downloadFileToExcel} style={{ marginBottom: "15px" }}>下载</Button>
<Table
bordered
rowKey={record => record.id}
style={{ background: 'white' }}
columns={columns}
dataSource={getRepaymentPlanList}
pagination={false}
size='middle'
/>
</div>
</>
)
}
}
使用插件js-export-excel并不能将页面中的table表格直接导出为excel文件，而是我们自定义一个导出为excel文件的方法，其中使用的数据源与页面的table表格的数据源一致，然后进行拼接；这样的隐式绑定方法在页面看来像是将table数据直接导出为excel文件，一旦导出excel方法中写错一个字段，那table数据和excel文件数据就会不一致，而且问题不容易排查，只能去代码里面一行一行排查代码。
页面效果图，点击下载按钮之后会自动下载excel文件：
打开excel文件，内容可编辑：
