|
最近公司的公众号管理系统需要添加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 [
{marginLeft: 10}} key='importExcel' {...uploadProps} >
导入
,
|