react+antd中使用插件js-export-excel将table数据导出为excel文件

首先在项目中安装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文件，内容可编辑：