美文网首页程序员
JSON数据导出Excel(纯js实现、兼容IE浏览器)

JSON数据导出Excel(纯js实现、兼容IE浏览器)

作者: oNexiaoyao | 来源:发表于2017-07-13 15:43 被阅读586次

只在谷歌浏览器测试通过,ie浏览器测试不行

<html> 
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8">  
<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function(){  
        $('#wwo').click(function(){  
            var data = {"title":[{"value":"集团", "type":"ROW_HEADER_HEADER", "datatype":"string"}, {"value":"日期", "type":"ROW_HEADER_HEADER", "datatype":"string"}],"data":[[{"value":"好好", "type":"ROW_HEADER"}, {"value":"2015-08-24", "type":"ROW_HEADER"}]]};  
            if(data == '')  
                return;  
            JSONToExcelConvertor(data.data, "Report", data.title);  
        });  
    });  

    function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {  
        //先转化json  
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;  
          
        var excel = '<table>';      
          
        //设置表头  
        var row = "<tr>";  
        for (var i = 0, l = ShowLabel.length; i < l; i++) {  
            row += "<td>" + ShowLabel[i].value + '</td>';  
        }  
          
          
        //换行  
        excel += row + "</tr>";  
          
        //设置数据  
        for (var i = 0; i < arrData.length; i++) {  
            var row = "<tr>";  
              
            for (var index in arrData[i]) {  
                var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;  
                row += '<td>' + value + '</td>';  
            }  
              
            excel += row + "</tr>";  
        }  

        excel += "</table>";  

        var excelFile = "<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'>";  
        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';  
        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';  
        excelFile += '; charset=UTF-8">';  
        excelFile += "<head>";  
        excelFile += "<!--[if gte mso 9]>";  
        excelFile += "<xml>";  
        excelFile += "<x:ExcelWorkbook>";  
        excelFile += "<x:ExcelWorksheets>";  
        excelFile += "<x:ExcelWorksheet>";  
        excelFile += "<x:Name>";  
        excelFile += "{worksheet}";  
        excelFile += "</x:Name>";  
        excelFile += "<x:WorksheetOptions>";  
        excelFile += "<x:DisplayGridlines/>";  
        excelFile += "</x:WorksheetOptions>";  
        excelFile += "</x:ExcelWorksheet>";  
        excelFile += "</x:ExcelWorksheets>";  
        excelFile += "</x:ExcelWorkbook>";  
        excelFile += "</xml>";  
        excelFile += "<![endif]-->";  
        excelFile += "</head>";  
        excelFile += "<body>";  
        excelFile += excel;  
        excelFile += "</body>";  
        excelFile += "</html>";  

          
        var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);  
          
        var link = document.createElement("a");      
        link.href = uri;  
          
        link.style = "visibility:hidden";  
        link.download = FileName + ".xls";  
          
        document.body.appendChild(link);  
        link.click();  
        document.body.removeChild(link);  
    }  
</script> 
</head>
<body>  
<input type="button" id="wwo" value="导出" /> 
</body>
</html>  

兼容IE浏览器,table导出excel,

//判断浏览器类型
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie  
if (explorer.indexOf("MSIE") >= 0 || explorer.indexOf("Edge") >= 0 || (explorer.indexOf('Trident') > -1 && explorer.indexOf("rv:11.0") > -1)) {
    return 'ie';
}
else {
    return 'notIe'
}
}
function dataToExcel(tableid, name, filename) {
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;
    xlsheet.Columns("A:D").AutoFit;
    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(tableid, name, filename)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
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]--></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, filename) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
    document.getElementById("dlink").href = uri + base64(format(template, ctx));
    document.getElementById("dlink").download = filename;
    document.getElementById("dlink").click();
}
})()
//进行调用
// 执行表格导出到excel
dataToExcel('tableid', 'name', 'xiazai.xls');
**页面需要
<a id="dlink" style="display:none">ceshi</a>
ie浏览器要自定义安全级别

相关文章

网友评论

    本文标题:JSON数据导出Excel(纯js实现、兼容IE浏览器)

    本文链接:https://www.haomeiwen.com/subject/iqnwhxtx.html