Vue--表格导出excel（导出table表格所有数据）

还是继续前几天那个表格的需求，之前用纯前端做完了分页功能和筛选功能之后，我们再来完善一下一键导出Excel表格功能；
其实iview组件库的table部分也可以调用 exportCsv() 方法，可以将数据导出为 .csv 的表格文件，但是我们日常使用的是Excel .xlsx格式 的表格，因此仍需要用到插件来完成我们的需求。网上相关代码很多，但是目前这个是我见过最好理解方便的处理方式了。

一、 第一步先安装3个依赖包：

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

觉得下载太慢的话可以安装淘宝镜像，用cnpm下载。

二、在项目中新建一个文件夹（名字自取，这里命名excel），然后在文件夹中放入Blob.js 和 export2Excel.js 两个文件（我把地址贴在这，可以直接下载解压）

链接地址：https://pan.baidu.com/s/1itpx7GqPhp44CWdK-NT5qw
提取码：kzlr

下载解压完建好文件夹就长这样：

记住路径，待会调用函数的时候需要用到。

三、在你要导出表格的"xxx.vue"页面给按钮绑定点击事件：

<Button type="primary" @click="exportData" style="display:block; margin:5px auto;">导出Excel表格</Button>

在<script></script>标签的methods方法中调用下载表格的事件

methods: {
	//触发按钮点击下载事件
	exportData() {
		this.excelData = this.historyList;  //将你要导出的数组数据（historyList）赋值给excelDate
		this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
	}，
	//表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel");  
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = ["报名日期", "姓名", "班级", "学号","性别","邮箱","联系方式","所选导师"]; // 导出的excel表头名信息
        const filterVal = [
          "date",
          "name",
          "class",
          "studentId",
          "sex",
          "email",
          "telephone",
          "teacher"
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "学生报名信息汇总"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
}

四、总结一下这段代码需要按照个人需求修改的几个小点：
高亮部分就是改动点 ——

1. this.excelData = this.historyList;
2. require("@/assets/excel/Export2Excel");
3. const tHeader = [“报名日期”, “姓名”, “班级”, “学号”,“性别”,“邮箱”,“联系方式”,“所选导师”];
4. const filterVal = [
   “date”,
   “name”,
   “class”,
   “studentId”,
   “sex”,
   “email”,
   “telephone”,
   “teacher”
   ];
   export_json_to_excel(tHeader, data, “学生报名信息汇总”);

总的来说这个用前端导出excel的操作还是比较简单，如果您有更便捷好用的方法，欢迎推荐~~