js将table导出excel 之文件改名及格式化全攻略

 

 之所以写该文，因为网上有很多js将table导出excel的方法，都大同小异，但大都存在这样或那的样的问题使大家不得不放弃，从而转向从后台导出，常见问有三个

1.不兼容大多数浏览器

2.无法自己定义文件名

3.无法格式化导出表格的样式

现就以上三点分别介绍，在介绍以上三点之前看一下我所做的表格及导出后以效果：

最后一张是导出成的excel 其中的样式完成可以自己在js设计，下面具体介绍：

一，.可兼容大部分浏览的js代码：

/**
 * 导出excel
 */
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 exportExcel(tableid) {  
    if(getExplorer()=='ie')  
    {  
        var curTbl = document.getElementById(tableid);  
        var oXL = new ActiveXObject("Excel.Application");  
        var oWB = oXL.Workbooks.Add();  
        var xlsheet = oWB.Worksheets(1);  
        var sel = document.body.createTextRange();  
        sel.moveToElementText(curTbl);  
        sel.select();  
        sel.execCommand("Copy");  
        xlsheet.Paste();  
        oXL.Visible = true;  
        try {  
            var fname = oXL.Application.GetSaveAsFilename("Excel.xls",filename);  
        } 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(tableid);
    }  
}  
function Cleanup() {  
    window.clearInterval(idTmr);  
    CollectGarbage();  
}  


var tableToExcel = (function() {  
    var uri = 'data:application/vnd.ms-excel;base64,',  
    template = '     'xmlns="http://www.w3.org/TR/REC-html40">'+
    ' '+
    '

{table}',  
            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} ; 
       // window.location.href = uri + base64(format(template, ctx))  ;
       document.getElementById("exportExcel").href = uri + base64(format(template, ctx));
       document.getElementById("exportExcel").download = filename;
     //  document.getElementById("exportExcel").click();
    }  ;
})()  ;

function Cleanup() {  
    window.clearInterval(idTmr);  
    CollectGarbage();  
}  

代码中的filename 我是定义的了一个全局的变量来接收动态生成的文件名，你也可以通过方法传参。

二，导出生成自定义文件名部分说明：

 导出EXCEL

看上面代码中的 id 在js部分起到的做用就是生成自定义文件名的关键,如果你的页面不是用easyui写的你用的是,可以加一个隐藏的来实现该功能。如不明白请留言

三，导出excel格式：

参考js代码中的： template = '      'xmlns="http://www.w3.org/TR/REC-html40">'+
    ' '+

该段代码中的css样式就是控制生成excel的样式。