将el-table中的数据导出到excel中

定义一个exportAllToExcel函数来实现导出

import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
// 导出所有数据
export function exportAllToExcel(_this, getData, fileName, tableId) {
  const temp_pageNo = _this.query.pageNo
  const temp_pageSize = _this.query.pageSize
  const temp_oprationShow = _this.showOperation
  _this.showOperation = false // 不显示操作按钮
  _this.query.pageNo = 1 // 显示第一页
  _this.query.pageSize = _this.total // 将表格长度变成数据总长度
  getData(_this.query).then((res) => {
    _this.$nextTick(() => {
      const wb = XLSX.utils.table_to_book(document.querySelector(tableId ? `#${tableId}` : '#out-table'))
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream',
          }),
          fileName + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      _this.query.pageNo = temp_pageNo
      _this.query.pageSize = temp_pageSize
      _this.showOperation = temp_oprationShow
      return wbout
    })
  })
}

其中getData为请求数据列表的API接口，fileName为导出文件的名字，tableId为要导出table的id

 <el-table
                :data="rightTableData"
                row-key="id"
                size="small"
                height="calc(100% - 10px)"
                stripe
                ref="table"
                id="out-table"
              ></el-table>

如果只想要导出本页面的数据，则不需要改变this.query.pageSize的值。

导出效果：