javascript 导出Excel

测试兼容IE google 火狐浏览器。看到的朋友也许你某一天也会需要。

//obj是table表格外面嵌套div id
function saveCode(obj) {
    try {
        var strHTML = obj.innerHTML;
        if (navigator.userAgent.indexOf("MSIE") > 0) //IE浏览器
        {
            var winname;
            winname = window.open("ToExcel", "_blank", 'top=10000');
            winname.document.open('text/html', 'replace');
            winname.document.write("<style>");
            winname.document.write("table{border:solid 1px #000;text-align:center;border-collapse:collapse; border-spacing:0;}");
            winname.document.write("table td{border:solid 1px #000;text-align:center;}");
            winname.document.write("table th{border:solid 1px #000;text-align:center;}");
            winname.document.write("</style>");
            winname.document.write(strHTML);
            winname.document.execCommand('SaveAs', '', 'excel.xls');
            document.execCommand("ClearAuthenticationCache");
            winname.close();
        } else { //Chrome 火狐 浏览器
            var str = getTblData("datalist", this); //"博客, 域名Blog \r\n  2Sjolzy.cn, 3.1;2 \r\n  123123,123123  \r\n 123,123"; 测试数据
            var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str);//要编码

            //创建a标签模拟点击下载
            var downloadLink = document.createElement("a");
            downloadLink.href = uri;
            downloadLink.download = "excel.csv";
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    } catch (e) {
        alert(e.Message);
        return false;
    }
    return false;
}



function getTblData(inTbl, inWindow) {
    var rows = 0;
    var tblDocument = document;
    tblDocument = eval(inWindow).document; 
    var curTbl = tblDocument.getElementById(inTbl);
    var outStr = "";
    if (curTbl != null) {
        for (var j = 0; j < curTbl.rows.length; j++) {
            for (var i = 0; i < curTbl.rows[j].cells.length; i++) {

                if (i == 0 && rows > 0) {
                    outStr += ",";// \t";
                    rows -= 1;
                }

                outStr += curTbl.rows[j].cells[i].innerText + ",";//\t";
                if (curTbl.rows[j].cells[i].colSpan > 1) {
                    for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                        outStr += ",";// \t";
                    }
                }
                if (i == 0) {
                    if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                        rows = curTbl.rows[j].cells[i].rowSpan - 1;
                    }
                }
            }
            outStr += "\r\n";
        }
    }

    else {
        outStr = null;
        alert(inTbl + "不存在 !");
    }
    return outStr;
}


 

对应obj 和datalist 的html结构如图：

注意的是 getTblData里面构建数据源的时候","号是换行符 如果文字里面有,号 需要替换。

 

解决汉字乱码问题 

 

var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); 

数据需要 BOM 头  

BOM 头就是一个文档标记，标识 Unicode 文件