vue表单中批量导入功能_Vue+Element前端导入导出Excel

1 前言

1.1 业务场景

由前台导入Excel表格，获取批量数据。

根据一个数组导出Excel表格。

1.2 Demo 地址

2 实现原理

2.1 引入工具库file-saver、xlsx、script-loader

npm install -S file-saver xlsx

npm install -D script-loader

2.2 导入Excel

2.2.1 Element 上传控件

class="upload-demo"

action=""

:on-change="handleChange"

:on-exceed="handleExceed"

:on-remove="handleRemove"

:file-list="fileListUpload"

:limit="limitUpload"

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"

:auto-upload="false">

点击上传

只 能 上 传 xlsx / xls 文 件

limitUpload = 1限制只能上传1个文件

accept为默认打开的可上传的文件格式ha