//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();
}