zoukankan      html  css  js  c++  java
  • js导出表格到excel(合并头)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
                       <div id="table1">
                            <div class="tbHeadFix">
                                <div class="theadDiv" id="table1_theadDiv">
                                      
                                    <div class="theadDivBox">
                                        <table id="ta">
                                            <thead>
                                                <tr class="font-size-12 tr_head" >
                                                    <th rowspan="2">
                                                        <div class="col col0">品号</div>
                                                    </th>
                                                    <th rowspan="2">
                                                        <div class="col col2">客户</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col3">1月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col4">2月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col5">3月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col6">4月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col7">5月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col8">6月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col9">7月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col10">8月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col11">9月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col12">10月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col13">11月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col14">12月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col15">小计</div>
                                                    </th>
                                                </tr>
                                                <tr class="font-size-12 tr_head" >
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="font-size-12 tr_head" >
                                                    <th rowspan="2">
                                                        <div class="col col0">品号</div>
                                                    </th>
                                                    <th rowspan="2">
                                                        <div class="col col2">客户</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col3">1月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col4">2月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col5">3月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col6">4月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col7">5月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col8">6月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col9">7月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col10">8月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col11">9月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col12">10月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col13">11月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col14">12月</div>
                                                    </th>
                                                    <th colspan="2">
                                                        <div class="col col15">小计</div>
                                                    </th>
                                                </tr>
                                                <tr class="font-size-12 tr_head" >
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">预算</div>
                                                    </th>
                                                    <th>
                                                        <div class="mcol">决算</div>
                                                    </th>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
    
                               
                        <!--表格1结束-->
            <button onclick="javascript:method1('ta')">导出EXCEL</button>
            <script type="text/javascript">
                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 method1(tableid) {//整个表格拷贝到EXCEL中
        if(getExplorer()=='ie')
        {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
    
            //创建AX对象excel 
            var oWB = oXL.Workbooks.Add();
            //获取workbook对象 
            var xlsheet = oWB.Worksheets(1);
            //激活当前sheet 
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            //把表格中的内容移到TextRange中 
            sel.select();
            //全选TextRange中内容 
            sel.execCommand("Copy");
            //复制TextRange中内容  
            xlsheet.Paste();
            //粘贴到活动的EXCEL中       
            oXL.Visible = true;
            //设置excel可见属性
    
            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);
                //xls.visible = false;
                oXL.Quit();
                oXL = null;
                //结束excel进程,退出完成
                //window.setInterval("Cleanup();",1);
                idTmr = window.setInterval("Cleanup();", 1);
    
            }
    
        }
        else
        {
            tableToExcel('ta');
        }
    }
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{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>
        </body>
    </html>
  • 相关阅读:
    CSS压缩工具(自动合并重复的定义)
    windows创建服务
    ashx是什么文件,如何创建(转载)
    在mojoportal中建立自定义模块
    Mojoportal2339之汇总页面
    在vs2008中设置jquery智能提示 (转载)
    关于mojoportal在局域网或单机使用时注意事项
    html编辑器kindeditor我的使用方法 (转载)
    visual studio 2008 没有设计视图的解决方法(转载)
    模块开发捷径配置参数
  • 原文地址:https://www.cnblogs.com/yek9520/p/7691402.html
Copyright © 2011-2022 走看看