table导出选中项

需求

我是用的是element ui table，之前我做了导出，但是是导出列表的全部数据，但是新增的功能是可以复选框选中导出
结果：会导出我选中的这几条数据

安装依赖

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

在src文件夹中新建文件夹（命名为excel）

下载链接文件，放在excel中链接: https://pan.baidu.com/s/1Ax9M5SdA-RAr9q56liZUyQ 提取码: r62z
如下图所示：

正确设置路径

打开Export2Excel.js文件，设置里面的路径，正确引入Blob.js

页面代码

<Table :data="tableData" @selection-change="handleSelectionChange">
<Button type="primary" @click="downloadExcel">导出</Button> //导出按钮

method方法中写一个方法监控选择的行的情况

handleSelectionChange (val) { // 操作多选
      this.multipleSelection = val; // 多选的行会存入multipleSelection数组中
    }

导出方法method

// 列表下载
    downloadExcel () {
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.multipleSelection; // multipleSelection是一个数组，存储表格中选择的行的数据。
        this.export2Excel();
      }).catch(() => {
      });
    },
    // 数据写入excel
    export2Excel () {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel'); // 这里必须使用绝对路径
        const tHeader = ['表头名称1', '表头名称2', '表头名称3']; // 导出的表头名信息
        const filterVal = ['表头字段名1', '表头字段名2', '表头字段名3']; // 导出的表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, 'excel表格名字');// 导出的表格名称，根据需要自己命名
      });
    },
    // 格式转换，直接复制即可
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }

以上是参考别人的，由于很多地方会使用，我把导出的方法写在了公共的文件里面

// 公共文件是common
export default {
// 列表选中下载 excelData导出的数据,tHeader字段名称,filterVal字段
  downloadExcel(excelData,tHeader,filterVal) { 
    require.ensure([], () => {
      let { export_json_to_excel } = require("@/excel/export2Excel");
      let data = excelData.map(v => filterVal.map(j => v[j]));
      // 这是表格的名称。合同列表+当前日期，dateFormatStr是一个方法，格式化了日期
      let excelName='合同列表'+this.dateFormatStr(new Date)
      export_json_to_excel(tHeader, data, excelName); // 导出的表格名称，根据需要自己命名
    });
  }
}

在main.js中引入文件夹

import common from './common.js'
//注册到vue原型上
Vue.prototype.common = common

调用下载方法

downloadExcel{
  if (this.mulSelectContract.length > 0) {
        let fieldTitle = [
          "学员编号",
          "报名时间",
          "学员姓名"，
          "报名课程",
          "备注"
        ];
        let fieldName = [
          "StudentID",
          "AddTime",
          "name",
          "CourseLabel",
          "Comments"
        ];
        this.common.downloadExcel(
          this.mulSelectContract,
          fieldTitle,
          fieldName
        );
   }
}