前端js实现打印(导出)excel表格

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               
         
           

产品原型:

图片.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后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】

         
       
           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
这里写图片描述
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值