本人前端小白，因项目需要自学vue以及elementUI，遇到实现将表格中指定行的数据导出为excel文件中的需求，特此记录实现过程和心得，便于日后方便查阅。

安装依赖

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

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

新建文件夹后，在excel文件夹内新建两个js文件，分别命名为Blob.js、export2Excel.js，然后复制链接的代码分别到相关文件里。链接: https://pan.baidu.com/s/18BF4OF-wVzyw1IR_O7kUdw 提取码: 2v7d。

具体效果如图

element plus 获取table的每一列 elementui表格获取一行数据_Data

在相关文件内的method方法中，写入如下代码

注：默认你的Table是如下形式

<Table :data="tableData" @selection-change="handleSelectionChange" id="networkTable">

所以相应的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'); // 这里必须使用绝对路径，使用@/+存放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]));
    }

加入button

<Button type="primary" @click="downloadExcel">导出</Button>

嗯。正常的话，应该成功了，最起码我成功了。。。

遇到的问题

  1. 网上其他教程有一部分是这种 https://www.jianshu.com/p/6edf74f65fc1 。这种方法简单易行，不用添加额外的文件，装上依赖，写入代码就能用。不过存在缺陷，使其不能应用于实际开发场景中：不能指定列。这样会导致下载的excel的把页面全部的列都下载下来，包括复选框和后面操作列中的删除、修改。如下图
  2. 对于添加的Blob.js和export2Excel.js两个文件的原理还没有搞懂。
  3. 这篇文章的第三步，即“在build文件夹下找到webpack.base.conf.js做如下修改”，我并没有找到webpack.base.conf.js，所以有点懵逼，又看了 这篇文献，发现他似乎没有修改这步，所以我也跳过了，最后也能行。所以这里的原理我也没搞懂。。。

参考文献

https://www.jianshu.com/p/6edf74f65fc1