element-ui的table表格导出成excel表

1、安装依赖

npm install --save xlsx file-saver

2、在放置需要导出功能的组件中引入

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

3、HTML中的设置

简单来说就是给需要导出的
table标签el-table上加一个id：如exportTab，对应下面的exportExcel方法中的 document.querySelector(’#exportTab’)

4、在methods中设置真正实现导出转换excel表格的方法，如下

使用 this.$nextTick 是在dom元素都生成之后再执行

 exportExcel () {
      // this.pageNum = 1
      // this.pageSize = 20
      this.$nextTick(function () {
        /* generate workbook object from table */
        var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
        var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)
  
        /* get binary string as output */
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '审核情况表.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') {
            console.log(e, wbout)
          }
        }
        // this.pageNum = 1
        return wbout
      })
    },

5.会遇到的问题

1：问题：表格分页生成的时候只能生成当前页的excel

• 解决方法：在执行 exportExcel 方法的时候，先把表格的页码改为最大