VUE element-ui 之table表格导出Excel功能封装（纯前端实现）

需求：导出当前页面所有数据
步骤：
下载所需依赖：

npm install --save xlsx file-saver

引入依赖：
这里我进行了封装，由于很多页面都需要导出excel功能
js文件中引入依赖,进行导出方法封装：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
const utilWay = {
     // 导出excel
  exportExcel(id, excelName) { //方法接收两个参数：table表格的id, 导出的excel命名
    // 生成Excel工作簿对象
    var xlsxParam = { raw: true } // 只导出不解析
    var wb = XLSX.utils.table_to_book(document.querySelector('#' + id), xlsxParam )
    // 获取二进制字符串作为输出
    var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    book: true,
    type: 'array'
    })
    try {
      FileSaver.saveAs(
      // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
      // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
        new Blob([wbout], { type: 'appliction/octet-stream' }),
        // 设置导出的文件名称
        `${excelName}` + '.xlsx'
      )
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, wbout)
    }
    // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
    return wbout
  }
}
export default utilWay 

需要导出excel的页面引用：
注意：必须为table设置唯一id

<el-table
  id="excel_table"
  border
  height="80vh"
  :data="Data"
  style="width: 100%"
>
<el-button @click="exportData">导出excel</el-button>

import utilWay  from '@/api/privateIp'
methods: {
    exportData() {
      utilWay.exportExcel('excel_table', '采购汇总')//这里传入表格id,导出后的excel文件名称，如果一个页面有多个导出可设置为变量进行参数传递
    }
}

此方法亲测有效。