一、Excel批量导入数据
首先安装依赖插件
npm i file-saver xlsx --save
1、实现代码
import { Upload } from 'antd';
const uploadprops = {
// 这里我们只接受excel2007以后版本的文件，accept就是指定文件选择框的文件类型
accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
name: 'file',
headers: {
authorization: 'authorization-text',
},
showUploadList: false,
// 把excel的处理放在beforeUpload事件，否则要把文件上传到通过action指定的地址去后台处理
// 这里我们没有指定action地址，因为没有传到后台
beforeUpload: (file, fileList) => {
const rABS = true;
const f = fileList[0];
const reader = new FileReader();
reader.onload = e => {
let dataResult = e.target.result;
if (!rABS) dataResult = new Uint8Array(dataResult);
const workbook = XLSX.read(dataResult, {
type: rABS ? 'binary' : 'array',
});
// 假设我们的数据在第一个标签
const firstWorksheet = workbook.Sheets[workbook.SheetNames[0]];
// XLSX自带了一个工具把导入的数据转成json
const jsonArr = XLSX.utils.sheet_to_json(firstWorksheet, { header: 1 });
// 通过自定义的方法处理Json,得到Excel原始数据传给后端，后端统一处理
this.importUserListExcel(jsonArr);
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
return false;
},
};
<Upload {...uploadprops}>
<Tooltip title="">
<Button type="primary">
批量导入
</Button>
</Tooltip>
</Upload>
2、Excel原始数据处理
image.png
jsonArr
- Excel中出生年月是Excel默认时间格式
- 读取出来的时间格式和js时间格式存在差异
- 将Excel时间格式化成js时间，方法如下：
timestamp 为Excel时间,format表示以什么符号分割
如：this.timestamp(34982, '-') // '1995-10-10'
formatDate = (timestamp, format) => {
const time = new Date((timestamp - 1) * 24 * 3600000 + 1);
time.setYear(time.getFullYear() - 70);
const year = `${time.getFullYear()}`;
const month = `${time.getMonth() + 1}`;
const date = `${time.getDate()}`;
if (format && format.length === 1) {
return (
year +
format +
(month < 10 ? `0${month}` : month) +
format +
(date < 10 ? `0${date}` : date)
);
}
return year + (month < 10 ? `0${month}` : month) + (date < 10 ? `0${date}` : date);
};
- 对于导入数据量比较大的情况，建议前端不进行数据处理，抛给后端处理，这样能节省前端处理数据的时间，10000条以内数据不复杂的情况下可以正常处理
- 导入数据8873条（1.8MB），读取时间2.5s，前端没做数据处理
- 以上方法可封装成通用组件
二、表格数据导出Excel
1、实现代码
- 父组件
import ExportExcel from '@/components/ExportExcel';
// 下载导入模版表头信息
exportExampleColumns = [
{
title: '姓名',
dataIndex: 'username',
},
{
title: '手机号',
dataIndex: 'phoneNumber',
},
];
onRefChild = ref => {
this.child = ref;
};
const exportExcelInfo = { tableName: '用户管理列表.xlsx', tableId: 'table' },
// exportExampleColumns表头信息，exportExcelData为表格数据，exportExcelInfo为通用组件设置
<ExportExcel
rowKey="id"
onRefChild={this.onRefChild}
exportExcelColumns={this.exportExampleColumns}
exportExcelData={exportExcelData}
exportExcelInfo={exportExcelInfo}
></ExportExcel>
- 子组件
import React, { PureComponent } from 'react';
import { Table } from 'antd';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
class ExportExcel extends PureComponent {
exportExcel = () => {
const xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
const wb = XLSX.utils.table_to_book(
document.querySelector(`#${this.props.exportExcelInfo.tableId}`),
xlsxParam,
);
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
FileSaver.saveAs(
new Blob([wbout], { type: 'application/octet-stream' }),
this.props.exportExcelInfo.tableName,
);
} catch (e) {
if (typeof console !== 'undefined');
}
return wbout;
};
render() {
const { exportExcelColumns, exportExcelData, exportExcelInfo, rowKey } = this.props;
const exportExcelObj = {
id: exportExcelInfo.tableId,
columns: exportExcelColumns,
dataSource: exportExcelData,
};
return (
<div style={{ display: 'none' }}>
<Table rowKey={rowKey || 'date'} {...exportExcelObj} pagination={false} />
</div>
);
}
}
export default ExportExcel;
2、局限性
- 导出数量达到一定数量导致导出的Excel为空，所以在导出数据量很大的情况下还是有后端来做比较好
- 导出方式和vue实现导出Excel中实现方式差不多，不过缺点是一样的，具体还是根据项目需求来定实现方案
