vue结合ElementUI做table数据导出Excel

在项目的开发过程中，用的ElementUI做table数据渲染，其中数据导出Excel是经常会用到的，那该怎么做呢？

vue结合ElementUI做table数据导出Excel的方法：

第一步：安装依赖

npm install --save xlsx file-saver

插件的使用参考：

https://github.com/SheetJS/js-xlsx 
https://github.com/eligrey/FileSaver.js

第二步：组件头部引入

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

第三步：写个导出Excel的方法

<el-table :data="list" id="out-table">
</el-table>

/**
 * 导出Excel
 */
exportExcel(){
  var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  try{
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
  }catch(e){
    if(typeof console !== 'undefined') console.log(e,wbout);
  }
  return wbout
},

注意这里：
1、XLSX.uitls.table_to_book：是table的DOM节点
2、sheetjs.xlsx 是导出的文件名

第四步：点击导出就可以了

<el-button class="filter-item" size="mini" @click="exportExcel">导出Excel</el-button>