前端js实现打印excel表格

摘要:
导出考勤表<选择移动到元素文本(curTbl);sel.exec命令(“复制”);}最后{oWB.SaveAs(fname);oXL.Quit();idTmr=window.setInterval(“Cleanup();template='<{table}<<divclass=“tools”>

产品原型:

前端js实现打印excel表格第1张
图片.png

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

前端js实现打印excel表格第2张
图片.png
前端js实现打印excel表格第3张
图片.png

jsp页面代码:

<div class="tools">
<button type="button"      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"     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>

==================================================================
注意:本文原创作者祈澈姑娘,创作不易。转载请标明作者和文章的原文链接,或到微信公众号获取授权。

若需要转载,联系原文作者
更多技术文章,行业交流,web前端开发资源,前端交流群,开源代码,前端干货,职场感悟,求职指导,请看原文链接:祈澈姑娘
或者联系我的微信,创作不易,走过路过点个赞呗

免责声明:文章转载自《前端js实现打印excel表格》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇RPN网络Docker使用:利用宝塔面板Docker管理器快速搭建PHP、Java、Python、nodejs等配套运行环境下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

分页(模仿百度)

这次分页时上次分页的升级版,分页格式模仿百度,使用的是原生JS 话不多说,直接看代码吧 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分页</title> <style> #Data...

HTML往div中赋值

HTML中往div赋值 <div id="mazey">content</div>   使用JavaScript: var mazey=document.getElementById("mazey"); mazey.innerHTML=data;  使用jQuery: $("#mazey").html(data);  ...

从Prism中学习设计模式之MVVM 模式简述MVVM

从Prism中学习设计模式之MVVM 模式(一)--简述MVVM 在学习Prism中涉及的MVVM之前,我想有必要分别把MVC&MVP,MVVM,Command三种模式进行简单的总结,这样可以更好的理解Prism尤其是WPF的设计理念。 本文内容: MVVM的来龙去脉 为什么Prism使用MVVM 示例讲解 一、MVVM的来龙去脉      在...

使用bacula实现Linux的远程备份和还原

Bacula,被誉为开源软件中最好的备份还原软件,它提供了企业级的客户机/服务器的备份解决方案,能够通过网络来管理文件的备份,恢复和核实工作。Bacula,既有windows版本的,也有Linux,Unix的。但目前有关于其使用的文章是在太少,而且介绍的很不详细,今天,我就来和大家一起探讨一下。(最新版本2.4.3主页[url]http://www.bac...

appscan 对api的手工检测

AppScan 在 API 安全测试中的实例介绍 在本项目中,API 遵循标准的的 REST 架构和背端服务器进行通信。针对 API 的功能测试由两部分组成:一部分是用一个 Web 的测试页面直接实现的,另一部分,由于 Web 页面的局限性(比如不能任意修改 HTTP header),所以是通过 Shell 脚本调用 curl 实现的。 并且这个 API...

工单系统的设计与实现(2)

本项目后端采用的是SpringBoot+Mybatis进行开发,为REST风格。前端采用的Vue.js框架,组价使用的是Element。数据库使用的是Mysql。部署采用的是nginx+docker。 本博客只用于记录开发思路,具体的实现细节可参考本人的GitHub。  数据库的表结构实现细节省略。  首先,利用IDE创建Spring项目,我使用的是I...