Vue＋Element前端导入导出Excel

（给JavaScript加星标，提升前端技能.）

作者：xrkffgg

https://segmentfault.com/a/1190000018993619

1、 前言

1.1业务场景

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

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

2、 实现原理

2.1 引入工具库

file-saver、xlsx、script-loader

2.2 导入Excel

2.2.1 Element 上传控件

限制只能上传1个文件

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

这里定义了一下变量，指向最新上传的附件，起始定义为null。

这里发现控件是我们要用的类型。

2.2.2 导入判断

2.2.3 导入函数

就是我们要的结果，是一个数组。每一个值是个对象，包含了两个属性。

excel中格式为横向 设备ID 和 设备型号。

2.3 导出Excel

2.3.1 引入JS文件

可参考下载地址-github：https://github.com/xrkffgg/Ktools/tree/master/JS/002.Excel

将其中的2个JS文件放入到自己的工程中。

2.3.2 修改JS文件中地址

打开，会出现如上图所示。由于本人将和放到了同一级，这里引入是这样的。

这几个文件不支持import引入，所以需要来将他们挂载到全局环境下。

2.3.3 导出函数

这里的引用请根据自己的层级关系和文件夹命名

为传入的数组，格式如：

为导出Excel表头名称，即为导出Excel名称。

下载的Excel位置根据浏览器设置的下载位置而定。

3、 后记

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得 点赞 ，谢谢大家

好文和朋友一起看~