VUE element-ui 之table表格导出Excel功能

步骤一：
安装依赖

npm install --save xlsx file-saver

引入依赖

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

步骤二：
定义表格id

<div class="dealed-details" style="height: 50px;">
        <span>未交易销售人员数据详情</span>
        <el-button round class="exportExcel1" @click="getExcData(excelName.dow.id,excelName.dow.name)">导出Excel</el-button>
      </div>
      <el-table
        id="out-table1"
        v-loading="loading"
        :data="tableData2"
        border
        height="352"
        class="dv_table"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
      >


data() {
	return {
		excelName: {
        top: {
          id: 'out-table',
          name: '未达成交易销售人员数据详情'
        },
        dow:  {
          id: 'out-table1',
          name: '未达成交易销售人员数据详情'
        }
      }
	}
}

步骤三：
js部分

 // 导出Excel
    getExcData(id, name) { // 获取id及name
      this.exportExcel(id, name)
    },
    exportExcel(id, name) {
      var xlsxParam = { raw: true } // 只导出不解析
      var wb = XLSX.utils.table_to_book(document.querySelector('#' + id), xlsxParam)
       wb.Sheets.Sheet1['A1'].v = '年份' // 固定表头A1,B1,C1......
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `${name}` + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
    *这里我的页面有两个表格所以id不同*

希望能帮到您，如有不足请烦请指点，共勉之。