Vue+Element 实现excel的导入导出

Vue+Element 实现excel的导入导出
在最近项目中，用到了模板下载与批量上传的功能，下面是实现步骤（本地环境是@vue/cli 4.3.1+element，vue2.0可能会有报错，自行调整即可）

一、环境安装
1、先安装相关依赖

1 npm install -S xlsx file-saver
2 npm install -D script-loader

2、依赖装完之后，还需要准备两个js文件，分别是Blob.js和Export2Excel.js（这两个文件在文章末尾有源码），将两个文件放在项目指定目录中。我是放在里src目录下的utils中，放在其他目录也可以

二、excel文件导出
1、在相应vue文件中，定义触发导出excel文件的方法

1 <div class="insured-btn-div">
2     <el-button type="primary" size="small" @click="handleExport">模板下载</el-button>
3 </div>

2、再引入Export2Excel.js即可，源码如下

 1 //模板下载
 2 handleExport() {
   
   
 3     require.ensure([], () => {
   
   
 4         const {
   
    export_json_to_excel } = require('@/utils/Export2Excel');
 5         console.log(this.insured);
 6         let tHeader = [];
 7         if (this.insured.length > 0) {
   
   
 8             //从insured中提取标题
 9             this.insured.forEach(item=>{
   
   
10                 tHeader.push(item.name);
11             })
12         }
13         export_json_to_excel(tHeader, [], '被保险人信息模板');
14         return false;
15     })
16 },

注意：我的模板下载是一个只有标题的空excel，而且标题是直接从其他地方获取的，为了更好理解，再给出一个简单示例

 1 // 下载
 2 handleExport() {
   
   
 3     require.ensure([], () => {
   
   
 4         const {
   
   
 5             export_json_to_excel
 6         } = require('vendor/Export2Excel');
 7         const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'];
 8         const filterVal = ['id', 'title', 'author', 'views', 'display_time'];
 9         const list = [
10             {
   
   id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
11             {
   
   id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
12             {
   
   id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
13         ];
14         const data = this.formatJson(filterVal, list);
15         export_json_to_excel(tHeader, data, '列表excel');
16     })
17 },

我的模板下载后是这样的：
简单示例中得到的excel文件是这样的：由于filterVal中是views，而list中是pageviews，所以得到的阅读数那一栏都是空的

三、excel文件导出
模板下载之后，按照格式填写对应的数据，再上传解析
1、这是触发文件导出的方法，action=""，不上传服务器，只是解析excel中的数据而已

 1 <div class="insured-btn-div">
 2     <el-upload
 3         class="upload-demo"
 4         action=""
 5         :on-change="handleChange"
 6         :show-file-list="false"
 7         accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
 8         :auto-upload="false">
 9         <el-button size="small" type="primary">批量上传</el-button>
10     </el-upload>
11 </div>

2、解析excel文件的方法

 1 //上传文件
 2 handleChange(file, fileList){
   
   
 3     var f = file.raw;// 获取文件内容
 4     // 通过DOM取文件数据
 5     var rABS = false; //是否将文件读取为二进制字符串
 6     var reader = new FileReader();
 7     var that = this;
 8     //if (!FileReader.prototype.readAsBinaryString) {
   
   
 9     FileReader.prototype.readAsBinaryString = function(f) {
   
   
10         var binary = "";
11         var rABS = false; //是否将文件读取为二进制字符串
12         var wb; //读取完成的数据
13         var outdata;
14         var reader = new FileReader();
15         reader.onload = function(e) {
   
   
16             var bytes = new Uint8Array(reader.result);
17             var length = bytes.byteLength;
18             for(var i = 0; i < length; i++) {
   
   
19                 binary += String.fromCharCode(bytes[i]);
20             }
21             var XLSX = require('xlsx');
22             if(rABS) {
   
   
23                 wb = XLSX.read(btoa(fixdata(binary)), {
   
    //手动转化
24                     type: 'base64'
25                 });
26             } else {
   
   
27                 wb = XLSX.read(binary, {
   
   
28                     type: 'binary'
29                 });
30             }
31             outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
32             this.da = [...outdata] //这就是excel文件中的数据
33             // let arr = [];
34             // 下面是数据解析提取逻辑
35             if (that.insured.length > 0) {
   
   
36