ant-design的导出数据为Excel

1.需要的包

import ExportJsonExcel from 'js-export-excel';``

2.关键代码

exportExcel = () => {
        var option = {};
        let dataTable = this.state.data;
        let kindName = ''
        switch(this.state.flag) {
            case "0":
                kindName = '基准情景';
                break;
            case "1":
                kindName = '低碳情景';
                break;
            case "2":
                kindName = '强化低碳情景';
                break;
            default: 
                break;
        };
        option.fileName = '碳排放量_'+kindName;
        option.datas = [
            {
            sheetData: dataTable,
            sheetName: 'sheet',
            sheetFilter: ['first', 'second', 'third', 'fourth'],
            sheetHeader: ['年份', '碳排放量(万tCO₂)', '碳排放强度(tCO₂/万元)', '人均碳排放量(tCO₂)'],
            }
        ];
        var toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel(); 

    }

附录：

本页面的完整代码：

import React from "react";
import {Button, Col, Form, Table, Tooltip} from "antd";
import styles from "../CarbonPeakPredictio.less";

import {DownloadOutlined, LineChartOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import {withRouter} from 'react-router-dom';
import { connect } from 'dva';
import ExportJsonExcel from 'js-export-excel';

const namespace = 'energy/';

@connect()
class CarbonEmission extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: [],
            flag: undefined == props.location.query.mode ? '1': props.location.query.mode,
        }
    };

    goToPage = () => {
        let temp = '';
        switch(this.state.flag) {
            case "0":
                temp = 'basic';
                break;
            case "1":
                temp = 'low';
                break;
            case "2":
                temp = 'carbon';
                break;
            default: 
                break;
        };
        //跳转到碳排放预测 基准情景
        this.props.history.push(
            { pathname: "/dataQuery/carbonPeak-prediction/carbonUp/scenario",
              state: {
                flag: '1',
                mode: temp,
            }
        });
    }

    queryData = (param) => {
        let temp = [];
        //连接model层获取后端的数据
        const { dispatch } = this.props;
        dispatch({
            type: namespace+"queryPeakForecast",
            payload: {
                code: param,
            },
            callback: (result) => {
                const lastIndex = result.data.length - 1;
                if (result.data[lastIndex].sortyear<2019) {
                    let obj = [];
                    obj.first = 2019
                    obj.second = '-';
                    // 碳排放强度
                    obj.third = '-';
                    // 人均碳排放量
                    obj.fourth = '-'; 
                    temp.push(obj)
                }
                // 遍历数组，处理数据
                if(result.data[0].sortyear < 2019){
                    result.data.forEach(item => {
                        if (item.sortyear>2040) {
                            return;
                        }
                        let obj = new Object;
                        // item是一个对象
                        obj.first = item.sortyear
                        obj.second = item.ce.toFixed(4);
                        // 碳排放强度
                        if (undefined == item.ceIntensity || item.ceIntensity == 0) {
                            obj.third = 0;
                        } else {
                            obj.third = (item.ceIntensity/item.gdp).toFixed(4);
                        }
                        // 人均碳排放量
                        if (undefined == item.cePerCapita || item.cePerCapita == 0) {
                            obj.fourth = 0;
                        } else {
                            obj.fourth = item.cePerCapita.toFixed(0); 
                        }
                        temp.push(obj)
                    })
                }
                this.setState({data: temp})
            }
        })
    }
    componentDidMount() {
        let param = 'lcv1';
        switch(this.state.flag) {
            case "0":
                param = 'v1';
                break;
            case "1":
                param = 'lcv1';
                break;
            case "2":
                param = 'Slcv1';
                break;
            default:
                break;
        };
        this.queryData(param);
    }

    rowClassName = (record, index) => {
        if(record.first <=2019) {
            return styles.history;
        } else {
            return styles.futher;
        }

    }

    // 点击事件
    showData = (e) => {
        var param = '';
        const selectVal = e.currentTarget.value;
        switch(selectVal) {
            case "0":
                param = 'v1';
                break;
            case "1":
                param = 'lcv1';
                break;
            case "2":
                param = 'Slcv1';
                break;
            default:
                break;
        };
        this.queryData(param);
        this.setState({
            flag: selectVal,
        })
    };


    exportExcel = () => {
        var option = {};
        let dataTable = this.state.data;
        let kindName = ''
        switch(this.state.flag) {
            case "0":
                kindName = '基准情景';
                break;
            case "1":
                kindName = '低碳情景';
                break;
            case "2":
                kindName = '强化低碳情景';
                break;
            default: 
                break;
        };
        option.fileName = '碳排放量_'+kindName;
        option.datas = [
            {
            sheetData: dataTable,
            sheetName: 'sheet',
            sheetFilter: ['first', 'second', 'third', 'fourth'],
            sheetHeader: ['年份', '碳排放量(万tCO₂)', '碳排放强度(tCO₂/万元)', '人均碳排放量(tCO₂)'],
            }
        ];
        var toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel(); 

    }

    render() {
        const WeekColumns = [
            {
                title: '年份',
                align: 'center',
                key: 'First',
                children:[{
                    title: '单位',
                    align: 'center',
                    dataIndex: 'first',
                    key: 'target',
                    render(text) {
                        if (text == 2019) {
                            return {
                                children:   <Tooltip title="基准年">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2019&nbsp;&nbsp;
                                    <QuestionCircleOutlined style={{color: '#808080'}}/></Tooltip>,
                            }
                        }
                        return text
                    },
                }]
            },

            {
                title: '碳排放量',
                align: 'center',
                key: 'Second',
                children: [
                    {
                        title: '万tCO₂',
                        dataIndex: 'second',
                        key: 'second',
                        align: 'center',
                    },

                ],
            },

            {
                title: '碳排放强度(单位GDP碳排放量)',
                align: 'center',
                key: 'Third',
                children: [
                    {
                        title: 'tCO₂/万元',
                        dataIndex: 'third',
                        key: 'third',
                        align: 'center',
                    },
                ],
            },

            {
                title: '人均碳排放量',
                align: 'center',
                key: 'Fourth',
                children: [
                    {
                        title: 'tCO₂',
                        dataIndex: 'fourth',
                        key: 'fourth',
                        align: 'center',
                    },
                ],
            },

        ];

        return (
            <div>
                <div className={styles.divButton}>
                    <Form layout='inline' className={styles.form}>
                        <Button value={0} 
                            style={{width: 90}} 
                            type={this.state.flag == 0 ?'primary':''}
                            onClick={this.showData}
                        >基准情景</Button>
                        <Button value={1} type={'primary'} style={{width: 90}}
                            type={this.state.flag == 1 ?'primary':''}
                            onClick={this.showData}
                        >低碳情景</Button>
                        <Button value={2} style={{width: 115}}
                            type={this.state.flag == 2 ? 'primary' : ''}
                            onClick={this.showData}
                        >强化低碳情景</Button>
                    </Form>
                </div>

                <div className={styles.divClassifyFather}>
                    <div className={styles.divClassifyFirstChildren}>
                    </div>
                    <div style={{float: "left", marginRight: 10 }}>
                        实际值
                    </div>
                    <div className={styles.divClassifySecondChildren}>
                    </div>
                    <div style={{float: "left", marginRight: 20}}>
                        预测值
                    </div>
                    <span style={{marginLeft: 16}} onClick={this.goToPage}>
                        <span className={styles.hoverClass}>
                            <LineChartOutlined className={styles.chart} />碳达峰预测分析
                        </span>
                    </span>
                    <span style={{marginLeft: 12}} className={styles.hoverClass} onClick={this.exportExcel}>
                        <DownloadOutlined className={styles.download}/>下载
                    </span>
                </div>
                <Table pagination={false} dataSource={this.state.data} columns={WeekColumns} scroll={{ y: 530 }}
                        rowClassName={this.rowClassName}
                       className={styles.classifyColorNew} bordered/>
            </div>
        )
    }
}
export default withRouter(CarbonEmission);