码迷,mamicode.com
首页 > Web开发 > 详细

js导出表格到excel(合并头)

时间:2017-10-19 12:29:12      阅读:518      评论:0      收藏:0      [点我收藏+]

标签:option   UI   creat   interval   ref   catch   javascrip   schema   http   

<!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>

 

js导出表格到excel(合并头)

标签:option   UI   creat   interval   ref   catch   javascrip   schema   http   

原文地址:http://www.cnblogs.com/yek9520/p/7691402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!