前端表格导出-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(); }
标签：function,ie8,rowspan,导出,表头,childFilterArr,body,var,table 来源： https://www.cnblogs.com/xuwebdesign/p/13722805.html