vue+file-saver+xlsx导出table为excel

 

 

1、安装：

npm install file-saver xlsx --save-dev
cnpm install file-saver xlsx --save-dev //淘宝镜像

2、引入：

import FileSaver from 'file-save';

import XLSX from 'xlsx';

3、点击事件：　　　　　

exportExcel() {

　　　　　　　　let vb = XLSX.utils.table_to_book(document.getElementById('outTable'));

　　　　　　　　let vbout = XLSX.write(vb, {bookType: 'xlsx', bookSST: true, type: 'array'});

　　　　　　　　try {

    　　　　　　　　FileSaver.saveAs(new Blob([vbout], {type: 'application/octet-stream'}), 'sheetjs.xlsx');
　　　　　　　　} catch (e) {
    　　　　　　　　if (typeof console !== 'undefined') console.log(e, vbout);
　　　　　　　　}
　　　　　　　　return vbout;
　　　　　　}

针对网上的一些问题，我收集了一些常见的需求的解决方法和一些问题的解决方法

.注意点：

 1. var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换 

 

  2.  如果存在分页，导出时却只导出当前table绑定的数据，假如我们设置的table每页只有10条数据，导出时只导出了10条，并非所有符合条件的数据

　　原因：此插件只导出当前table中所有的数据

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

 

3.  第一次导出时，导出的excel表格只有表头，没有数据内容

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

 

4.  导出的数据出现两份的情况

　　原因：因为element ui下的el-table被渲染出来后有两个table标签，目的是方便进行数据交互使用，所以如果el-column存在fixed属性时，导出时会出现两份数据的情况

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

 

5.  别的博主说使用element-ui导出excel表格，代码基于vue-element-admin-master，这个导出来的数据会更完善，更能解决业务上的逻辑，这里也推荐一篇文章   https://blog.csdn.net/weixin_44846723/article/details/100886061