React / Vue 实现 Excel 数据导入
React
1. Excel数据格式化
主要是三个步骤：使用input/antd-upload组件上传需要导入的文件——将excel数据处理为json数据——将json数据处理成antd-table组件所需的数据（主要是增加唯一的key）。
（1）使用antd-upload组件上传需要导入的文件。
// 不使用默认的上传方式
const handleBeforeUpload = (file: any) => {
// 处理上传的文件 file 数据
console.log(file);
return false;
};
return（
<Upload
name="file"
accept={accept}
maxCount={1}
showUploadList={{ showRemoveIcon: false }}
beforeUpload={handleBeforeUpload}
>
<div className="content-btn">
<span className="iconfont import-icon"></span>
上传文件
</div>
</Upload>
）（2）将excel数据处理为json数据。
// Excel 数据转为 json 数据
export function importsExcel(file: any) {
//使用promise导入
return new Promise((resolve, reject) => {
// 通过FileReader对象读取文件
const fileReader = new FileReader();
//异步操作 excel文件加载完成以后触发
fileReader.onload = (event) => {
try {
const { result } = event.target as any;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: "binary" });
// 存储获取到的数据
let data: any = [];
// 遍历每张工作表进行读取
for (const sheet in workbook.Sheets) {
if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {
data = data.concat(
// 将工作表转换为json数据
XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
);
}
}
// 如果Excel文件里只有一张数据工作表（比如：data），也可以不遍历，直接获取数据
// if (Object.prototype.hasOwnProperty.call(workbook.Sheets, "data")) {
// // 将工作表转换为json数据
// data = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
// }
resolve(data); //导出数据
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
reject("导入失败");
}
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(file);
});
}（3）将json数据处理成antd-table组件所需的数据。
// 手动上传
const handleBeforeUpload = (file: any) => {
// 数据处理excel=>json
importsExcel(file).then((res: any) => {
const ids: any = [];
const arr = res.map((item: any, index: number) => {
// 利用时间戳+索引，生成唯一的ID，也可以直接使用index
const id = (Date.now() + index).toString();
item.id = id;
ids.push(id);
return item;
});
// 表格数据
setData(arr);
// 导入数据空，禁用「导入」按钮
setDisable(res.length === 0);
});
return false;
};2. 可编辑表格
导入数据的表格支持编辑才是关键！！！
这里用的是 antd pro 的 EditableProTable 组件，之前的文章里有介绍过proTable的详细用法（antd 高级组件 ProComponents 之 高级表格 ProTable）。
// columns，表格列一定是要根据Excel模板提前定义好的
const columns = [{
title: "评委手机号",
dataIndex: "评委手机号",
width: 166,
},
{
title: "评委邮箱",
dataIndex: "评委邮箱",
width: 166,
},{
title: "操作",
valueType: "option",
width: "80px",
fixed: "right",
render: (text: string, record: any, _: any, action: any) => {
return (
<Space>
<span
onClick={() => {
action?.startEditable?.(record.id);
}}
>编辑</span>
<span
onClick={() => {
setData((d) => d.filter((item) => item.id !== record.id));
}}
>删除</span>
</Space>
);
},
}]
// 导入数据，根据需求处理数据
const handleImport = () => {
// data
}
// 页面元素
<EditableProTable
columns={columns}
rowKey="id"
scroll={{ x: 800, y: 180 }}
value={data}
onChange={setData}
recordCreatorProps={false}
editable={{
type: "multiple",
editableKeys,
actionRender: (row, config, defaultDom) => [defaultDom.save, defaultDom.cancel],
onChange: setEditableRowKeys,
}}
/>
<Button className="organ-btn" type="primary" disabled={disable} onClick={handleImport}>开始导入</Button>Vue
1. Excel数据格式化
处理逻辑与 React 一样，也是三个步骤：使用input/element-upload组件上传需要导入的文件——将excel数据处理为json数据——将json数据处理成element-table组件所需的数据（主要是增加唯一的key）。
（1）使用element-upload组件上传需要导入的文件。
// 页面元素
<template>
<el-upload
class="upload-file"
action=""
:accept="accept"
:limit="1"
:before-upload="handleBeforeUpload"
>
<el-button size="small" type="primary">上传文件</el-button>
</el-upload>
</template>
// 不使用默认的上传方法
handleBeforeUpload(file) {
// 拿到上传的文件 file 数据
console.log(file);
return false;
}（2）将excel数据处理为json数据（与react的处理逻辑一样）。
（3）将json数据处理成element-table组件所需的数据。
// 手动上传
const handleBeforeUpload = (file) => {
// 数据处理excel=>json
importsExcel(file).then((res) => {
const ids = [];
const arr = res.map((item, index) => {
// 利用时间戳+索引，生成唯一的ID
const id = (Date.now() + index).toString();
item.id = id;
ids.push(id);
return item;
});
// 表格数据
this.form.list = arr;
});
return false;
};2. 可编辑表格
导入数据的表格支持编辑才是关键！！！
由于 element 并没有现成的支持编辑的表格组件，所以需要利用插槽的能力来实现编辑功能。
实现思路：将表格的单元格作为表单项，通过状态控制当前行是否处于编辑状态：编辑状态下，单元格内容用el-input渲染；非编辑状态下，单元格内容用span渲染。
// 页面元素
<el-form :model="form" ref="form">
<el-table :data="form.list" height="250" border>
<el-table-column
v-for="column in tableItems"
:key="column.label"
:label="column.label"
:prop="column.prop"
>
<template slot-scope="scope">
<el-form-item
:rules="column.rules"
:prop="'list.' + scope.$index + '.' + column.prop"
>
<el-input
clearable
placeholder="请输入内容"
v-show="scope.row.show"
v-model="scope.row[column.prop]"
></el-input>
<span v-show="!scope.row.show">
{{ scope.row[column.prop] }}
</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="scope.row.show = !scope.row.show">{{
scope.row.show ? "保存" : "编辑"
}}</el-button>
<el-button @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button
class="organ-btn"
size="medium"
type="primary"
@click="handleImport"
>
开始导入
</el-button>
// tableItems，表格列一定是要根据Excel模板提前定义好的
data() {
return {
form: {
tableItems: [
{
label: "姓名",
key: "name",
prop: "姓名*",
rules: [
{
required: 1,
message: "未填写！"
}
]
},
{
label: "身份证号",
key: "idCardNo",
prop: "身份证号*",
rules: [
{
required: 1,
message: "未填写！"
},
{
pattern: RegCard,
message: "格式不正确！"
}
]
}
]
}
};
},
// 导入数据，根据需求处理数据
handleImport() {
// this.form.list
},
