网页纯前端导出table为excel表格

下面是完整的代码,exportTable是直接调用的方法,tableid是table标签的id,
selectField是筛选的数组,只有数组中的列会导出,name是导出的文件名
var idTmr;  
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';  
    }  
}  
function exportTable(tableid,selectField,name) {  
	var ahtml = ' <a href="#" id="exportExcel" style="display:none" ></a>';
	if(!document.getElementById("exportExcel"))
		$("body").append(ahtml);
    if(getExplorer()=='ie')  
    {  
    	var curTbl = gridTable(tableid,selectField);
        var oXL = new ActiveXObject("Excel.Application");  
        var oWB = oXL.Workbooks.Add();  
        var xlsheet = oWB.Worksheets(1);  
        var sel = this.document.body.createTextRange();  
        sel.moveToElementText(curTbl);  
        sel.select();  
        sel.execCommand("Copy");  
                xlsheet.Paste();  
                oXL.Visible = true;  
  
                try {  
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");  
        } catch (e) {  
            print("Nested catch caught " + e);  
        } finally {  
            oWB.SaveAs(fname);  
            oWB.Close(savechanges = false);  
            oXL.Quit();  
            oXL = null;  
            idTmr = window.setInterval("Cleanup();", 1);  
                }  
  
            }  
            else  
            {  
                tableToExcel.call(this,tableid,selectField,name);
            }  
        }  
        function Cleanup() {  
        	window.clearInterval(idTmr);  
            CollectGarbage();  
        }  
        function gridTable(tableid,selectField){
        	var columnModel = this.$("#"+tableid).jqGrid('getGridParam', 'colModel');
		    var dataModel = this.$("#"+tableid).jqGrid("getRowData");
		    var footerData = this.$("#"+tableid).jqGrid("footerData");
		    var table = ["<table cellspacing=\"0\" cellpadding=\"5\" rules=\"all\" border=\"1\">"];
		    //写出列名
		    table.push("<tr style=\"background-color: #FFE88C;font-weight: bold; white-space: nowrap;\">");
		    $.each(columnModel,function(i,jqgridcolumn){
		    	if($.inArray(jqgridcolumn.name,selectField)>=0 && !!jqgridcolumn.label && !jqgridcolumn.hidden){
		    		table.push("<td style=\"width:" + jqgridcolumn.width + "px;text-align:" + jqgridcolumn.align + "\">" + jqgridcolumn.label + "</td>");
		    	}
		    });
		    table.push("</tr>");
		    //写数据
		    $.each(dataModel,function(i,row){
		    	table.push("<tr>");
		    	$.each(columnModel,function(i,jqgridcolumn){
		        	if($.inArray(jqgridcolumn.name,selectField)>=0 && !!jqgridcolumn.label && !jqgridcolumn.hidden){
		        		var text = row[jqgridcolumn.name];
		        		table.push("<td style=\"vnd.ms-excel.numberformat:@;width:" + jqgridcolumn.width + "px;text-align:" + jqgridcolumn.align + "\">"+text+"</td>");
		        }
		    });
		    table.push("</tr>");
    });
    table.push("</table>");
    return $(table.join(""))[0];
}
var tableToExcel = (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]-->'
            	+'<meta charset="UTF-8"></head>'
            	+'<body>{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, selectField, name) {  
        if (!table.nodeType) table = gridTable(table,selectField); 
        var ctx = {worksheet: name || 'Worksheet', table: table.outerHTML}  
        document.getElementById("exportExcel").href = uri  
        + base64(format(template, ctx));  
        document.getElementById("exportExcel").download = name + ".xls";//自定义文件名  
        document.getElementById("exportExcel").click();
        //window.location.href = uri + base64(format(template, ctx))  
    }  
})()

以上是所有代码,因为用的是jqgrid的插件,所以中间有一段代码,使用jqgrid的方法拼接成一个新的表格,这样使用上更加灵活,不仅可以改变样式和结构,还能选择需要导出的列

        function gridTable(tableid,selectField){
        	var columnModel = this.$("#"+tableid).jqGrid('getGridParam', 'colModel');
		    var dataModel = this.$("#"+tableid).jqGrid("getRowData");
		    var footerData = this.$("#"+tableid).jqGrid("footerData");
		    var table = ["<table cellspacing=\"0\" cellpadding=\"5\" rules=\"all\" border=\"1\">"];
		    //写出列名
		    table.push("<tr style=\"background-color: #FFE88C;font-weight: bold; white-space: nowrap;\">");
		    $.each(columnModel,function(i,jqgridcolumn){
		    	if($.inArray(jqgridcolumn.name,selectField)>=0 && !!jqgridcolumn.label && !jqgridcolumn.hidden){
		    		table.push("<td style=\"width:" + jqgridcolumn.width + "px;text-align:" + jqgridcolumn.align + "\">" + jqgridcolumn.label + "</td>");
		    	}
		    });
		    table.push("</tr>");
		    //写数据
		    $.each(dataModel,function(i,row){
		    	table.push("<tr>");
		    	$.each(columnModel,function(i,jqgridcolumn){
		        	if($.inArray(jqgridcolumn.name,selectField)>=0 && !!jqgridcolumn.label && !jqgridcolumn.hidden){
		        		var text = row[jqgridcolumn.name];
		        		table.push("<td style=\"vnd.ms-excel.numberformat:@;width:" + jqgridcolumn.width + "px;text-align:" + jqgridcolumn.align + "\">"+text+"</td>");
		        }
		    });
		    table.push("</tr>");

要设置导出excel的文件名没有直接的方法,只能通过临时创建一个a标签,设置download属性为文件名,然后触发点击事件,“exportExcel”就是我临时创建a标签的id

var tableToExcel = (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]-->'
            	+'<meta charset="UTF-8"></head>'
            	+'<body>{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, selectField, name) {  
        if (!table.nodeType) table = gridTable(table,selectField); 
        var ctx = {worksheet: name || 'Worksheet', table: table.outerHTML}  
        document.getElementById("exportExcel").href = uri  
        + base64(format(template, ctx));  
        document.getElementById("exportExcel").download = name + ".xls";//自定义文件名  
        document.getElementById("exportExcel").click();
        //window.location.href = uri + base64(format(template, ctx))  
    }  
})()
以上

猜你喜欢

转载自blog.csdn.net/qq_36804701/article/details/80363694