本文共 3029 字，大约阅读时间需要 10 分钟。

最近公司的公众号管理系统需要添加Excel导入与导出功能，考虑到需要多个地方引用，所以开发了一个组件，下面把代码分享出来给大家。

首先是组件的代码，注意Antd是2.x的版本。

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 [            导出,            
                   
    导入            
   ,            模板下载        ]    }}// 定义参数类型ImportExportExcel.propTypes = {    // 模板下载地址    templateHref: PropTypes.string.isRequired,    // 上传地址    url: PropTypes.string.isRequired,    // 导入成功后的回调    importSuccessCallback: PropTypes.func};export default ImportExportExcel;

以下是在组件中的使用方法，首先引入组件，引入路径根据实际存放情况自行修改。

import ImportExportExcel from "components/ImportExportExcel";

下面是组件在render方法里的调用，templateHref为模板下载地址，url为上传地址，importSuccessCallback为上传成功后的回调方法，对应的是请求表格数据的事件。

   
     this.getTableData({pages: 1})}/>
   

转载地址：http://musp.baihongyu.com/