React结合Antd实现Excel导入导出

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button,Upload,message,} from 'antd';
import Cookies from 'js-cookie';
// 服务器地址，此处为了做演示，没有全局引入，直接写了
const Host = 'http://xxxxxx.cn';

class ImportExportExcel extends Component {
    constructor(props) {
        super(props);
        // 模板下载事件
        this.jumpTo = this.jumpTo.bind(this);
        // 表格导出事件
        this.exportExcel = this.exportExcel.bind(this);
        // 表格上传事件
        this.uploadProps.onChange = this.uploadProps.onChange.bind(this);
    }
    // 模板下载
    jumpTo() {
        window.open(this.props.templateHref);
    }
    // 上传参数
    uploadProps = {
        // 发到后台的文件参数名
        name: 'file_import',
        // 接受的文件类型
        accept: '.xls,.xlsx',
        // 上传的地址
        action: Host + this.props.url + '/import',
        // 是否展示上传的文件
        showUploadList:false,
        // 上传的参数
        data: {
            token: Cookies.get("token"),
            uid: Cookies.get('uid')
        },
        // 设置上传的请求头部，IE10 以上有效
        headers: {
            authorization: 'authorization-text',
        },
        // 上传文件前的钩子函数
        beforeUpload() {
            message.loading('正在导入中...');
            return true;
        },
        // 上传文件改变时的状态
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                if (info.file.response.code !== 200) {
                    setTimeout(() => {
                        message.destroy();
                        message.error(info.file.response.message);
                    });
                } else {
                    this.props.importSuccessCallback && this.props.importSuccessCallback();
                    setTimeout(() => {
                        message.destroy();
                        message.success('导入成功');
                    });
                }
            } else if (info.file.status === 'error') {
                setTimeout(() => {
                    message.destroy();
                    message.error('导入失败');
                });
            }
        },
    }

    // 导出Excel表格
    exportExcel() {
        const url = Host + this.props.url + `/export?token=${Cookies.get('token')}&uid=${Cookies.get('uid')}`;
        window.open(url);
    }

    render() {
        const uploadProps = this.uploadProps;
        return [
            <Button style={{marginLeft: 10}} key='exportExcel' onClick={this.exportExcel}>导出</Button>,
            <Upload style={{marginLeft: 10}} key='importExcel' {...uploadProps} >
                <Button>导入</Button>
            </Upload>,
            <Button style={{marginLeft: 10}} key='templateDowload' onClick={this.jumpTo}>模板下载</Button>
        ]
    }
}

// 定义参数类型
ImportExportExcel.propTypes = {
    // 模板下载地址
    templateHref: PropTypes.string.isRequired,
    // 上传地址
    url: PropTypes.string.isRequired,
    // 导入成功后的回调
    importSuccessCallback: PropTypes.func
};

export default ImportExportExcel;

import ImportExportExcel from "components/ImportExportExcel";

<ImportExcel
    templateHref={HOST + "/static/excel/excel_template.xlsx"}
    url='/api/user_manage'
    importSuccessCallback={() => this.getTableData({pages: 1})}
/>