产品原型：

图片.png

功能需求：点击导出考勤表格按钮，会自动下载成Excel格式

图片.png
图片.png

jsp页面代码：

<div class="tools">
<button type="button" class="btn green" id="excell"  onclick="method5(\'dataTable\')">导出考勤表</button>
</div>

js代码

//打印表格
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 method5(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",
                        "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)
        }
    }
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function() {
        var uri = \'data:application/vnd.ms-excel;base64,\', template = \'<html><head><meta charset="UTF-8"></head><body><table  border="1">{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) {
            if (!table.nodeType)
                table = document.getElementById(table)
            var ctx = {
                worksheet : name || \'Worksheet\',
                table : table.innerHTML
            }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()

完整的可复制黏贴的demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div class="tools">
            <button type="button" class="btn green" id="excell" onclick="method5(\'dataTable\')">导出考勤表格</button>
        </div>

        <table border="1" id="dataTable">
            <tr>
                <td>王婷111</td>
                <td>一见倾城333 </td>
            </tr>
            <tr>
                <td>祈澈姑娘222</td>
                <td>Python开发者交流平台44</td>
            </tr>
            <tr>
                <td>wwwangting888</td>
                <td>13661725475</td>
            </tr>
        </table>

    </body>
    <script>
        //打印表格
        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 method5(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",
                        "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)
            }
        }

        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var tableToExcel = (function() {
            var uri = \'data:application/vnd.ms-excel;base64,\',
                template = \'<html><head><meta charset="UTF-8"></head><body><table  border="1">{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) {
                if(!table.nodeType)
                    table = document.getElementById(table)
                var ctx = {
                    worksheet: name || \'Worksheet\',
                    table: table.innerHTML
                }
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    </script>

</html>

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】

版权声明：本文为ting6原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ting6/p/9725732.html