zoukankan      html  css  js  c++  java
  • 前端js实现打印(导出)excel表格

    产品原型:

    5640239-957de55f1c8cbef4.png
    图片.png

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

    5640239-047c94cea80139c1.png
    图片.png
    5640239-82cfd0d216ae36e8.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>
    

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

  • 相关阅读:
    每天学习算法二
    每天学习算法 一
    数据量基础
    SQL server数据库创建代码,filegroup文件组修改,
    SQL学习笔记之 数据库基础(一)
    Oracle的查询-条件表达式
    Oracle的查询-单行查询
    Oracle 的查询-scott用户介绍
    Oracle的基本操作-序列的使用
    Oracle的基本操作-修改表结构、数据的增删改查
  • 原文地址:https://www.cnblogs.com/wangting888/p/9702002.html
Copyright © 2011-2022 走看看