Vue element ui组件库 table 表格导出excel表格

先上成品图 合适了你再往下看

数据不方便展示，你懂就行

 

第一步 安装依赖

//第一个依赖
npm install --save xlsx 

//第二个依赖
npm install file-saver

第二步 引入依赖

在需要导出的页面引入依赖，或者引入全局 

我是在页面引入的

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

第三步在代码内给 <el-table>加一个id

后边还是你写的别的东西，你只需要加一个id

 <el-table 
     id="out-table"
       ...
>

第四步 在methods加入exportExcel（） 里边

  methods: {
    // 导出表单
    exportExcel () {
      /* generate workbook object from table */
     var xlsxParam = { raw: true };
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam )
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'Person List.xlsx')  //这个是你导出表单的名字Person List 这是我的，你自己随意
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },


}

第五步 在你的导出按钮里添加单机事件

   <el-button @click="exportExcel"></el-button>

这样就ok了，简单吧，也没那么复杂对吧