Vue+element ui table 导出到excel

需求：

　　Vue+element UI table下的根据搜索条件导出当前全部数据

参考：

　　https://blog.csdn.net/u010427666/article/details/79208145（vue2.0 + element UI 中 el-table 数据导出Excel）

准备工做：

　　一、安装依赖：npm install --save xlsx file-saver

　　二、在放置须要导出功能的组件中引入

　　　　import FileSaver from 'file-saver'

　　　　 import XLSX from 'xlsx'

　　三、HTML中的设置，简单来讲就是给须要导出的table标签el-table上加一个id：如exportTab，对应下面的exportExcel方法中的 document.querySelector('#exportTab') 

　　四、在methods中设置真正实现导出转换excel表格的方法，以下：

　　　

exportExcel () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只作解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), 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' }), '审核状况表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

 　　

 

使用过程当中遇到的问题：

（一）若是存在分页，导出时却只导出当前table绑定的数据，假如咱们设置的table每页只有10条数据，导出时只导出了10条，并不是全部符合条件的数据

　　缘由：此插件只导出当前table中全部的数据

　　解决办法：在HTML代码中再加一个el-table标签，这个table专门用来导出数据，且此table一直隐藏着，当查询条件发生变化时，根据后台返回的全部符合条件的数据总量total值，而后从新设置获取后台数据方法的参数，拉取到全部符合条件的数据绑定进来，这样导出的就是想要的数据了。

 

（二）第一次导出时，导出的excel表格只有表头，没有数据内容

　　解决方法：给导出到excel表格的函数exportExcel()设置一个延时执行便可，由于刚开始我没有设置延时执行，拉取到数据后直接赋值给了绑定到table上的exportData上，而后就当即调用exportExcel()致使，我猜想exportData渲染到table是须要必定时间的，这段时间内咱们当即调用exportExcel()时，数据还没被渲染进去，此时exportExcel()拿不到数据，故此第一次导出的表格中没有数据

 

（三）导出的数据出现两份的状况

　　缘由：由于element ui下的el-table被渲染出来后有两个table标签，目的是方便进行数据交互使用，因此若是el-column存在fixed属性时，导出时会出现两份数据的状况

　　解决方法：我是参照上面大佬的文章，直接将隐藏table中的el-table-column上的fixed属性去掉，毕竟这个table是隐藏起来的，直接去掉el-table-column上的fixed属性最便捷

 

（四）导出的excel表格，若是出现数字字符比较长的，在导出表格中会变成科学计数那样的状况

　　解决方法：即上面exportExcel()方法中的前面第二和第三行，已经作了说明

 

以上是我在项目中作table导出需求的一个过程，给本身留个笔记。