el-table导出单张excel（保留样式）

最新推荐文章于 2024-08-09 14:24:59 发布

King汀

最新推荐文章于 2024-08-09 14:24:59 发布

阅读量1.5k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_28691187/article/details/111478005

版权

el-table导出单张excel（保留样式）

注：该项目是在html页面中引入vue.js 来使用vue的

表格特点：
（1）表格带有合并单元格
（2）表格带有固定列

导出成excel时遇到的问题：
（1）带有固定列的表格，导出时会出现重复的问题
原因：使用el-table的fixed属性来固定某一列，其原理是创建两个tabledom，通过一个隐藏一个显示来实现交互效果。当导出整个el-table 就会将两个div内的table都导出，导致数据重复。审查元素如下：
在这里插入图片描述
解决方法：判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去。

表格：https://blog.csdn.net/qq_28691187/article/details/111476394
导出excel代码：

 	// 导出excel
     exportToExcel() {
         this.$nextTick(function () {
             var str = "";
             var wb = "";
             var fix = document.querySelector('.el-table__fixed');
             if (fix) { //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                 // console.log("存在固定列")
                 wb = document.querySelector('#out_table').removeChild(fix);
                 document.querySelector('#out_table').appendChild(fix);
             } else {
                 // console.log("不存在固定列")
                 wb = document.querySelector('#out_table');
             }
             str = $(wb).html();
             if (wb != "") {
                 // table{vnd.ms-excel.numberformat:@;} 文本形式
                 var html = "<html><head><meta charset='utf-8' /></head><body>" + str + "</body></html>";
                 var now = new Date();
                 var date = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
                 var fileName = $(".title").html();
                 var exportFileName = fileName + date + ' ' + ".xls";//自定义导出excel表名称
                 var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                 saveAs(blob, exportFileName);
             } else {
                 alert("未找到表格，导出失败！")
             }
         });
     }