产品原型：


图片.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>

前端js实现打印excel表格的更多相关文章

  1. 【面试题】js实现将excel表格copy到页面

    js实现将excel表格copy到页面 点击打开视频讲解更加详细 其实最核心的技术,还是copy的是我们粘贴板上的数据 就像平常怎么粘贴复制其他的数据一样,只是我们在excel粘贴的是一个表格数据 这 ...

  2. 前端js实现打印（导出）excel表格

    产品原型: 图片.png 功能需求:点击导出考勤表格按钮,会自动下载成Excel格式 图片.png 图片.png jsp页面代码: <div class="tools"> ...

  3. 使用Windows驱动的虚拟打印机，打印Excel表格无表格线问题解决（2）

    测试: 经前天的测试,最终还是没有明显的定夺到底是驱动的问题,还是打印机的问题.但是按照可能性来排查,最明显的一点就是其他测试环境不变的情况下增加一张图片,就可以打印出表格线,我始终觉得这里是突破点, ...

  4. 【翻译】将Ext JS Grid转换为Excel表格

    原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...

  5. 前端JS脚本将网页表格导出为Excel

    话不多说,上代码! <!DOCTYPE> <html> <head> <title>Excel Test</title> </head ...

  6. 【JS】打印Excel——ActiveX控件

    function viewToExcel(){ var filepath = "f:\\PrinterExcel.xls"; var xlApp; var xlBook; var ...

  7. web前端js 实现打印操作

    转载来源:https://www.cnblogs.com/potatog/p/7412905.html 一.打印当前页面指定元素中的内容 方式一:直接使用window.print(); (1)首先获得 ...

  8. 小谢第10问：前端JS下载文件、表格

    对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...

  9. JS导入导出Excel表格的方法

    https://blog.csdn.net/aa122273328/article/details/50388673 导出 https://blog.csdn.net/qq_37281252/arti ...

随机推荐

  1. java 位操作 bitwise(按位) operation bit

    java 位操作 bitwise(按位) operation bit //一篇对于 原码 反码 补码 的介绍 http://www.cnblogs.com/zhangziqiu/archive/201 ...

  2. 使用网络TCP搭建一个简单文件下载器

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶服务器Server 三丶测试TCP server服务器 四丶客户端Client 五丶测试客户端向服务器下载 ...

  3. <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /> <LINK href="Xubuntu.ico" rel="shortcut icon"> <link href="Xubuntu.ico" rel="B

    <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /& ...

  4. git还原文件

    http://jingyan.baidu.com/album/e4511cf33479812b855eaf67.html

  5. CSU1660: K-Cycle

    Description A simple cycle is a closed simple path, with no other repeated vertices or edges other t ...

  6. docker第一章

    简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协议开源. D ...

  7. setAttribute的浏览器兼容性

    1.element要用getElementById 或者是ByTagName来得到 2.setAttribute("class", vName)中class是指改变"cl ...

  8. Docker---(3)Docker常用命令

    原文:Docker---(3)Docker常用命令 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_3 ...

  9. 下次自己主动登录（记住password）功能

    1:进入cookie插件 <script src="jquery.cookie.js" type="text/javascript"></sc ...

  10. amazeui学习笔记--css（HTML元素3）--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...