vue element ui表格下载成xlsx工作表格

我们需要两个依赖
打开项目终端 输入

npm i file-saver -S
和
npm i xlsx -S

在需要使用的组件中引入依赖

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

然后 在需要导出的表格上绑定一个ref
这里以 viewTable为例

然后导出函数代码如下

 microApptaskExport(){
  try {
    const $e = this.$refs['viewTable'].$el
    let $table = $e.querySelector('.el-table__fixed')
    if(!$table) {
      $table = $e
    }
    const wb = XLSX.utils.table_to_book($table, {raw:true})
    const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
    FileSaver.saveAs(
      new Blob([wbout],{type: 'application/octet-stream'}),
      `数据统计表.xlsx`,
    )
  } catch (e) {
    if (typeof console !== 'undefined') console.error(e)
  }
},

记得注意ref的值