React结合Antd实现Excel导入导出

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

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

代码语言：javascript复制

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;

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

代码语言：javascript复制

import ImportExportExcel from "components/ImportExportExcel";

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

代码语言：javascript复制

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

antd excel render url 表格

0 人点赞