vue js 页面复杂表头数据原样导出

程序员文章站 2022-06-25 11:28:18

PS:开发过程中，很多时候都需要导出页面展示数据到excel，又得表头简单，但是有的表头复杂，涉及到跨行跨列，这种时候就导致，导出数据工作变得复杂起来，传统框架自带的导出功能只能导出一级表头，目前主流的结局办法就是通过后台，利用poi或者阿里封装的easy-excel来进行导出，这样就出现每一个页面表格的表头不一样需要后台重新封住，没办法进行公共方法提炼，难度较大，时间较长，所以介于此种问题，从反面入手，用html的方式来封装渲染数据然后进行导出，这样就不需要每一个都自行封装表头和数据，现代码如下：1、需...

那种都行，楼主使用的是vue,实例如下：

<div class="h-menu fn-clear">
   <ul class="h-ul l-tab">
       <li class="icon-search" @click="searchClick()">高级搜索</li>
       <li class="icon-add" @click="exportData(1)">数据导出</li>
   </ul>
</div>

页面效果：

vue js 页面复杂表头数据原样导出

2、编写导出方法：

//获取时间戳
 var aData = new Date();
 var time =  aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
 //将表头数据和表内数据渲染到html,然后导出：
 //!!!!!! 此处需要注意：vue的渲染机制不通， //他的表格数据其实是有表头table和数据table合成，
 //所以下文需要获取两个table的数据进行合并， // 如果是jsp页面选择，数据可能实在一个table里面，
 //这个要根据情况自行判断解决.
   var html = "<html>" +
       "<head><meta charset='utf-8' /></head>" +
       "<body>" +
       document.getElementsByTagName("table")[0].outerHTML +
       document.getElementsByTagName("table")[1].outerHTML+
       "</body>" +
       "</html>";
   var blob = new Blob([html], { type: "application/vnd.ms-excel" });
   //利用URL.createObjectURL()方法为a元素生成blob URL
   var a = document.createElement('a')
   a.setAttribute('href',URL.createObjectURL(blob))
   //设置文件名
  a.download = "喜报晒单统计情况("+time+").xls";
   a.click();

导出效果：

vue js 页面复杂表头数据原样导出