vue element UI的el-table导出到excel纯前端，

---

前言

vue element UI的el-table导出到excel纯前端，

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、file-saver和xlsx插件支持

file-saver：npmjs介绍
xlsx：xlsx介绍

二、使用步骤

1.引入库

代码如下：

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';//只导入XLSX可能会报错

2.给导出的el-table添加id

  <template>
    <el-table
    	id="exportOne"//添加id
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

操作方法

 // 获取el-table数据
      var table_elt = document.getElementById("exportOne");

    // 提取数据（从表中创建工作簿对象）
      var workbook = XLSX.utils.table_to_book(table_elt);
      //写入数据
      var expoerDataFile = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        //导出数据
        FileSaver.saveAs(new Blob([expoerDataFile], { type: 'application/octet-stream' }), new Date()+ '.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, expoerDataFile) }

      return expoerDataFile

---

总结

实现最后的导出！！！