vue2+element使用插件导出全部表格数据

1、下载这俩个插件xlsx 和file-saver

npm i xlsx file-saver -S

2、在需要导出表格数据的页面导入

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

3、我在这写了个导出按钮

       <el-button
          type="success"
          size="mini"
          @click="exportClick()"
          >导出表格</el-button>

4、写入导出提示，代码如下

 exportClick() {

  this.$confirm(
        "此操作将该项目下所有点集导出excel文件，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
            console.log('导出excel')
//如果不想影响表格的显示，可以重新调一次表格的接口
//这里是全部导出数据赋值
          this.form.pagesize = this.total
//重新调用表格数据，也就是重新调用了页面加载表格显示数据
          this.getPigList()
//调用成功后延迟加载导出
          setTimeout(() => {
            this.exportBtn()
          }, 1000)
      });
    }

5、导出数据

exportBtn() {
//表格使用的是el-table显示，这个获取的就是el-table自带的class，不是自己写的
      var fix = document.querySelector('.el-table__fixed-right')
      var wb
      var xlsxParam = { raw: true }
      if (fix) {
        wb = XLSX.utils.table_to_book(
    //这里获取的是el-table标签的id（自己写上去的id值）<el-table id="out-table">
          document.querySelector('#out-table').removeChild(fix),
          xlsxParam
        )
        document.querySelector('#out-table').appendChild(fix)
      } else {
        wb = XLSX.utils.table_to_book(
          document.querySelector('#out-table'),
          xlsxParam
        )
      }
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: 'application/octet-stream' }), //设置导出文件名称
          '某某某工作量.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined');
      }
//导出完成后记得把页面pagesize设置成初始页面显示数据，再重新调用下表格显示函数
      this.form.pagesize = 20
      this.getPigList()
      return wbout
    },

6、最后导出结果如下，导出结果是表格的所有数据，不是当前页面数据

另：这种是一次性导出全部表格数据，如果是有条件的导出（只要几条的），可以看看我的另一篇博客