前端表格导出-layui复杂表头导出支持ie8+

  //jQuery HTML导出Excel文件(兼容IE及所有浏览器)//传入需要导出的table的id         function HtmlExportToExcel(tableid,filename) {             //var filename = $('.datatitle').text();             if (getExplorer() == 'ie' || getExplorer() == undefined) {                 HtmlExportToExcelForIE(tableid, filename);             }else {                 HtmlExportToExcelForEntire(tableid, filename)             }         }         //IE浏览器导出Excel         function HtmlExportToExcelForIE(tableid, filename) {             try {                              var curTbl = document.getElementById(tableid);                   var oXL;                   try{                       oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel                   }catch(e){                       alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel,"+"那么请调整IE的安全级别。\n\n具体操作:\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");                       return false;                   }                   var oWB = oXL.Workbooks.Add(); //获取workbook对象                   var oSheet = oWB.ActiveSheet;//激活当前sheet                   var sel = document.body.createTextRange();                   sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中                   try{                     sel.select(); //全选TextRange中内容                   }catch(e1){                     e1.description                 }                 sel.execCommand("Copy");//复制TextRange中内容                   oSheet.Paste();//粘贴到活动的EXCEL中                   oXL.Visible = true; //设置excel可见属性                   var fname = oXL.Application.GetSaveAsFilename(filename+".xls", "Excel Spreadsheets (*.xls), *.xls");                   oWB.SaveAs(fname);                   oWB.Close();                   oXL.Quit(); 

 

            } catch (e) {                 alert(e.description);             }         }         //非IE浏览器导出Excel         var HtmlExportToExcelForEntire = (function() {         var uri = 'data:application/vnd.ms-excel;base64,',         template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',         base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },         format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }             return function(table, name) {                 if (!table.nodeType) { table = document.getElementById(table); }                 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}                 var $a=$("<a id='exportToExcel' href='"+uri + base64(format(template, ctx))+"' download='"+name+".xls'></a>");                 $('body').append($a);                 document.getElementById("exportToExcel").click();                 $a.remove();             }         })()         function getExplorer() {             var explorer = window.navigator.userAgent;             //ie              if (explorer.indexOf("MSIE") >= 0) {                 return 'ie';             }             //firefox              else if (explorer.indexOf("Firefox") >= 0) {                 return 'Firefox';             }             //Chrome             else if (explorer.indexOf("Chrome") >= 0) {                 return 'Chrome';             }             //Opera             else if (explorer.indexOf("Opera") >= 0) {                 return 'Opera';             }             //Safari             else if (explorer.indexOf("Safari") >= 0) {                 return 'Safari';             }         }     以上代码作为插件引入 layui table.render中加入以下代码 生产隐藏的table dom元素         done : function(res, curr, count) {             //res接口返回的信息;curr得到当前页码;count得到数据总量             //合并单元格 兼容ie8             layuiRowspan(['unitname'],1);//支持数组             createExportDomFun('unitEconomicRunTable');         } var execRowspan = function(fieldName,index,flag){     // 1为不冻结的情况,左侧列为冻结的情况     var fixedNode;     fixedNode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l"));     // 左侧导航栏不冻结的情况     var child = $(fixedNode).find("td");     var childFilterArr = [];     // 获取data-field属性为fieldName的td     for(var  i = 0; i < child.length; i++){       if(child[i].getAttribute("data-field") == fieldName){         childFilterArr.push(child[i]);       }     }     // 获取td的个数和种类     var  childFilterTextObj = {};     for(var i = 0; i < childFilterArr.length; i++){       //var childText = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;       var childText = childFilterArr[i].innerText;       //console.log(childText);       if(childFilterTextObj[childText] == undefined){         childFilterTextObj[childText] = 1;       }else{         var  num = childFilterTextObj[childText];         childFilterTextObj[childText] = num*1 + 1;       }     }     var canRowspan = true;     var maxNum;//以前列单元格为基础获取的最大合并数     var finalNextIndex;//获取其下第一个不合并单元格的index     var finalNextKey;//获取其下第一个不合并单元格的值     for(var i = 0; i < childFilterArr.length; i++){       (maxNum>9000||!maxNum)&&(maxNum = $(childFilterArr[i]).prev().attr("rowspan")&&fieldName!="8"?$(childFilterArr[i]).prev().attr("rowspan"):9999);       //var  key = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent;//获取下一个单元格的值       var key = childFilterArr[i].innerText;//获取下一个单元格的值       var nextIndex = i+1;       var tdNum = childFilterTextObj[key];       var curNum = maxNum<tdNum?maxNum:tdNum;       if(canRowspan){         for(var j =1;j<=curNum&&(i+j<childFilterArr.length);){//循环获取最终合并数及finalNext的index和key           //finalNextKey = flag?childFilterArr[i+j].innerHTML:childFilterArr[i+j].textContent;           finalNextKey = childFilterArr[i+j].innerText;           finalNextIndex = i+j;           if((key!=finalNextKey&&curNum>1)||maxNum == j){             canRowspan = true;             curNum = j;             break;           }           j++;           if((i+j)==childFilterArr.length){             finalNextKey=undefined;             finalNextIndex=i+j;             break;           }         }         childFilterArr[i].setAttribute("rowspan",curNum);         if($(childFilterArr[i]).find("div.rowspan").length>0){//设置td内的div.rowspan高度适应合并后的高度           $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");           $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height= curNum*38-10 +"px";         }         canRowspan = false;       }else{         childFilterArr[i].style.display = "none";       }       if(--childFilterTextObj[key]==0|--maxNum==0|--curNum==0|(finalNextKey!=undefined&&nextIndex==finalNextIndex)){//||(finalNextKey!=undefined&&key!=finalNextKey)         canRowspan = true;       }     }    } //合并数据表格行 var layuiRowspan = function(fieldNameTmp,index,flag){     var fieldName = [];     if(typeof fieldNameTmp == "string"){       fieldName.push(fieldNameTmp);     }else{       fieldName = fieldName.concat(fieldNameTmp);     }     for(var i = 0;i<fieldName.length;i++){       execRowspan(fieldName[i],index,flag);     } } function createExportDomFun(id){   var header_tr = $('#'+id+'').next().find(".layui-table-header").find("tr");   var body_tr = $('#'+id+'').next().find(".layui-table-body").find("tr");   var header_html = "";   var body_html = "";   // 获取表头html,包括单元格的合并   $.each(header_tr,function (i,tr) {       var header_th = $(tr).find("th");       header_html += "<tr>";       $.each(header_th,function (j,th) {           var rowspan_num = $(th).attr("rowspan");// 行合并数           var colspan_num = $(th).attr("colspan");// 列合并数           if (rowspan_num && !colspan_num){// 只有行合并时               header_html += '<th rowspan= "'+ rowspan_num +'">';           } else if (colspan_num && !rowspan_num){// 只有列合并时               header_html += '<th colspan= "'+ colspan_num +'">';           } else if (rowspan_num && colspan_num){// 行列合并均有时               header_html += '<th rowspan= "'+ rowspan_num +'" colspan="'+ colspan_num +'">';           } else {// 没有发生单元格合并               header_html += '<th>';           }           header_html += $(th).children().children().text() + '</th>';// 获取表头名称并拼接th标签       })       header_html += '</tr>';   })   // 获取表格body数据   $.each(body_tr,function (i,tr) {       var  body_td = $(tr).find("td");       body_html += '<tr>';       $.each(body_td,function (j,td) {           body_html += '<td>' + $(td).children().text() + '</td>';       })       body_html += '</tr>';   })   $('#'+id+' tr').remove();// 清除之前的doom结构   $('#'+id+'').append(header_html).append(body_html);   $('#'+id+'').hide(); }
上一篇:--《捡芝麻》-关于Angular使用的一些记录--


下一篇:Layui复杂表头自定义