javascript生成.xls文件(兼容IE&Chrome&Firefox)

lonelydawn

发布于 2018-02-09 12:11:22

9520

发布于 2018-02-09 12:11:22

贴代码，一切尽在注释中

<html>
<head>
    <meta charset="utf-8">
</head>

<body>
    <input type="button" value="下载设备模板" onclick="foo();" />


<script type="text/javascript" language="javascript">

var downloadTemplate = function() {
    /**
     * 根据所给数据创建并返回单行 tr节点
     * data (必选), tag (可选, 标识创建的节点类型)
     **/
    var getTr=function(data,tag){
        var tr=document.createElement("tr");
        for(var i=0;i<data.length;i++){
            var item=document.createElement(tag||"td");
            item.innerHTML=data[i];
            tr.appendChild(item);
        }
        return tr;
    };

    /**
     * 根据所给数据创建并返回 table节点
     * data (可选,无则返回空的table节点), head(可选, 标识是否存在表头)
     **/
    var getTable=function(data,head){
        var table=document.createElement("table");
        var head=head||false;

        //存在表头设标识为th,否则为td
        var tag=head?"th":"td";

        //判断是一维||二维,执行不同逻辑
        if(data[0] instanceof Array){
            for(var i=0;i<data.length;i++){
                //第一行数据根据tag创建节点类型
                (i==0)?table.appendChild(getTr(data[i],tag)):table.appendChild(getTr(data[i]));
            }
        }else if(data instanceof Array)
            table.appendChild(getTr(data,tag));
        return table;
    };

    /**
     * table (必选, table节点)
     * uri   为生成excel的头部标签
     * xmlns xml命名空间
     * 返回xls资源
     **/
    var getXls=function(table){  
        var uri = 'data:application/vnd.ms-excel;base64,';
        var 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>'+
            '<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> '+
            '<!--[if gte mso 9]>'+
            '<xml>'+
                '<x:ExcelWorkbook>'+
                    '<x:ExcelWorksheets>'+
                        '<x:ExcelWorksheet>'+
                            '<x:WorksheetOptions>'+
                                '<x:DisplayGridlines/>'+
                            '</x:WorksheetOptions>'+
                        '</x:ExcelWorksheet>'+
                    '</x:ExcelWorksheets>'+
                '</x:ExcelWorkbook>'+
            '</xml>'+
            '<![endif]-->'+
        '</head>'+
        '<body>'+
            '<table>{table}</table>'+
        '</body>'+
        '</html>';
    
        /**
         * 转码 base 64
         * window.btoa能从ascii/二进制流中创建一个base64编码的字符串
         * escape编码  unescape 解码字符串
         * encodeURIComponent编码  DecodeURIComponent 解码字符串
         **/
        var base64 = function(s) {
            return window.btoa(unescape(encodeURIComponent(s)));
        };

        //返回替换完具体数据的xls模板
        var getXlsXml = function(template,data) {
            return template.replace(/{(\w+)}/g,data);
        };

        //返回资源链接
        return uri+base64(getXlsXml(template, table.innerHTML));
    };

    /**
     * IE浏览器
     * 使用Microsoft ActiveXObject组件生成xls ( 只兼容IE浏览器,选择允许加载组件 )
     * table(必选, table节点)
     **/
    var msDownload=function(data){
        var xls = new ActiveXObject("Excel.Application");
        xls.visible = true;  
        var xlsBook = xls.Workbooks.Add;
        var xlsheet = xlsBook.Worksheets(1);

        for(var i=0;i<data.length;i++)
            if(data[0] instanceof Array)
                for(var j=0;j<data[0].length;j++)
                    xlsheet.Cells(i+1,j+1).Value=data[i][j];
            else xlsheet.Cells(1,i+1).Value=data[i];
        //用完释放
        xls=null;
    };
    
    //参数: data(必选,一维||二维 数组), head(可选, 标识是否存在表头)
    var download=function(data , head){
        if(window.navigator.userAgent.indexOf("MSIE") >= 0)
            msDownload(data);
        else 
            //下载(RestFul:资源下载置于超链接,地址为资源定位地址)
            window.location.href =getXls(getTable(data,head));
    };

    return {
        getXls:getXls,
        msDownload:msDownload,
        download:download
    };
};

//测试数据
var od=['aid','pwd','设备名称','网关DK','区域'];

var td=[
    ['aid','pwd','设备名称','网关DK','区域'],
    ['10086','root','松下R-399','208564165456542','2 #201'],
    ['10001','root','索尼SUV 09','456542895564165','2 #201']
];

var foo=function(){
    // new downloadTemplate().download(od,true);
    new downloadTemplate().download(td,true);
};

</script>
</body>
</html>