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

js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)

时间：2017-01-14 20:06:05      阅读：1410      评论：0      收藏：0      [点我收藏+]

标签：粘贴   table   collect   off   component   lin   项目   isp   span   

第一种导出table布局的表格

技术分享 
<html>

    <head>
        <meta charset="utf-8">
        <script type="text/javascript" language="javascript">
            var idTmr;

            function getExplorer() {
                var explorer = window.navigator.userAgent;
                //ie 
                if(explorer.indexOf(".NET") >= 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(tableid)
                }
            }

            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>

    </head>

    <body>
        <table id="targetTable">
            <tr align="center">
                <td>标识</td>
                <td>内容</td>
                <td>创建时间</td>
            </tr>
            <tr align="center">
                <a>
                    <td>1</td>
                    <td>excel01</td>
                    <td>2015-07-22</td>
                </a>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>excel02</td>
                <td>2015-07-22</td>
            </tr>
        </table>
        </br>
        <span>span</span>
        <input id="Button1" type="button" value="导出EXCEL" onclick="javascript:method1(‘targetTable‘)" />
    </body>

</html>
html

第二种导出div布局的表格

技术分享 
<!DOCTYPE html>

<html>

    <head>
        <meta name="viewport" content="width=device-width" />
        <meta charset="utf-8">
        <title>项目统计</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-datepicker3.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/layer.js"></script>
        <script src="js/bootstrap-datepicker.min.js"></script>
        <script src="js/bootstrap-datepicker.zh-cn.min.js"></script>
        <script type="text/javascript" language="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中
                //判断table是不是div布局的table
                if($("#" + tableid).prop("tagName") == "DIV") {
                    var table = $("#" + tableid).html(); //是div布局的table则重新建一个table，获取html标签替换    
                    tableid = "divTableID222"; //为了第二次导出execl的时候，不与table的id重复
                    if($(‘#‘ + tableid).length <= 0) //id为tableid的div不存在则创建一个隐藏的div
                    {
                        $(‘body‘).prepend("<div id=‘" + tableid + "‘ style=‘display: none;‘></div>");
                    }
                    $(‘#‘ + tableid).html(table); //把需要导出的内容加到这个隐藏的div中
                    //下面是替换标签
                    $(‘#‘ + tableid + ‘ .tr-th‘).replaceWith(function() {
                        return $("<tr />", {
                            html: $(this).html()
                        });
                    });
                    $(‘#‘ + tableid + ‘ .th‘).replaceWith(function() {
                        return $("<th />", {
                            html: $(this).html()
                        });
                    });
                    $(‘#‘ + tableid + ‘ .tr‘).replaceWith(function() {
                        return $("<tr />", {
                            html: $(this).html()
                        });
                    });
                    $(‘#‘ + tableid + ‘ .td‘).replaceWith(function() {
                        return $("<td />", {
                            html: $(this).html()
                        });
                    });
                }
                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(tableid)
                }
            }

            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>
    </head>

    <body>
        <div class="info-center">
            <div class="manage-head">
                <h6 class="padding-left manage-head-con">
                项目统计

                    <a class="h5 custom-red fr margin-left" href="/ProjectEntering/Index">录入项目</a>
                <a class="h5 custom-glay fr margin-left" href="/ProjectStatistics/Index?page=1&keyword=&AID=0&Project_state=&Excel=1‘">导出Execl</a>

                <select id="SelProject_state" class="h5 custom-glay fr margin-left" style="height: 32px; font-size: 10px; color: #565656; font-weight: normal; border: 1px solid #cecece; padding: 0 10px; margin-top: -5px;">
                    <option value="">状态</option>
                    <option value="">全部</option>
                    <option value="0">进行中</option>
                    <option value="1">完成</option>
                </select>
<input id="Button1" type="button" value="导出EXCEL" onclick="javascript:method1(‘targetTable‘)" />
                <a class="h5 custom-glay fr margin-left" href="javascript:void();" id="akeyword" >搜索</a>
                <input id="txtkeyword" value="" placeholder="请输入关键字" class="input w20 fr" style="vertical-align: top;" />
                <div class="span5 col-md-5 fr" id="sandbox-container" >
                    <div class="input-daterange input-group" id="datepicker">
                        <span class="input-group-addon" style="height: 32px; margin-top: -10px; ">时间段</span>
                        <input id="txtstartTime" type="text" class="input-sm form-control" name="start" readonly>
                        <span class="input-group-addon">至</span>
                        <input id="txtendTime" type="text" class="input-sm form-control" name="end" readonly>
                    </div>
                </div>
            </h6>
            </div>
            <div id="targetTable" class="offcial-table input-table table-margin clearfix">
                <div class="tr-th clearfix">
                    <div class="th w10">项目编号</div>
                    <div class="th w10">项目名称</div>
                    <div class="th w15">项目金额</div>
                    <div class="th w10">项目负责人</div>
                    <div class="th w10">创建时间</div>
                    <div class="th w10">实际总系数值</div>
                    <div class="th w10">预计总系数值</div>
                    <div class="th w10">项目状态</div>
                    <div class="th w15">操作</div>
                </div>
                <div id="projectInfo58" class="tr clearfix tr-check">
                    <a href="/ProjectDetail/Index?PID=58">
                        <div class="td w10">987</div>
                        <div class="td w10">test2017</div>
                        <div class="td w15">￥0</div>
                        <div class="td w10">Katherine </div>
                        <div class="td w10">2017/1/13 15:02:16</div>
                        <div class="td w10">28</div>
                        <div class="td w10">20</div>
                        <div class="td w10">
                            <span class="text-blue">
                                            进行中
                                        </span>
                        </div>
                        <div class="td w15">
                            <a href="/ProjectDetail/Index?PID=58">查看</a>
                            /
                            <a href="/ProjectEntering/Index?PID=58">修改</a>
                            /
                            <a name="aDeleteProject" data-id="58" href="javascript:viod();">删除</a>
                        </div>
                    </a>
                </div>
                <div id="projectInfo56" class="tr clearfix tr-check">
                    <a href="/ProjectDetail/Index?PID=56">
                        <div class="td w10">123456789</div>
                        <div class="td w10">test20170113</div>
                        <div class="td w15">￥0</div>
                        <div class="td w10">Katherine </div>
                        <div class="td w10">2017/1/13 14:00:28</div>
                        <div class="td w10">10</div>
                        <div class="td w10">9.5</div>
                        <div class="td w10">
                            <span class="text-blue">
                                            进行中
                                        </span>
                        </div>
                        <div class="td w15">
                            <a href="/ProjectDetail/Index?PID=56">查看</a>
                            /
                            <a href="/ProjectEntering/Index?PID=56">修改</a>
                            /
                            <a name="aDeleteProject" data-id="56" href="javascript:viod();">删除</a>
                        </div>
                    </a>
                </div>
                <div id="projectInfo53" class="tr clearfix ">
                    <a href="/ProjectDetail/Index?PID=53">
                        <div class="td w10">63</div>
                        <div class="td w10">63</div>
                        <div class="td w15">￥63</div>
                        <div class="td w10">admin</div>
                        <div class="td w10">2017/1/12 17:59:59</div>
                        <div class="td w10">96</div>
                        <div class="td w10">111</div>
                        <div class="td w10">
                            <span class="text-blue">
                                            进行中
                                        </span>
                        </div>
                        <div class="td w15">
                            <a href="/ProjectDetail/Index?PID=53">查看</a>
                            /
                            <a href="/ProjectEntering/Index?PID=53">修改</a>
                            /
                            <a name="aDeleteProject" data-id="53" href="javascript:viod();">删除</a>
                        </div>
                    </a>
                </div>
                <div id="projectInfo52" class="tr clearfix tr-check">
                    <a href="/ProjectDetail/Index?PID=52">
                        <div class="td w10">123-456</div>
                        <div class="td w10">test0112</div>
                        <div class="td w15">￥0</div>
                        <div class="td w10">Katherine </div>
                        <div class="td w10">2017/1/12 13:46:19</div>
                        <div class="td w10">56</div>
                        <div class="td w10">20</div>
                        <div class="td w10">
                            <span class="text-blue">
                                            进行中
                                        </span>
                        </div>
                        <div class="td w15">
                            <a href="/ProjectDetail/Index?PID=52">查看</a>
                            /
                            <a href="/ProjectEntering/Index?PID=52">修改</a>
                            /
                            <a name="aDeleteProject" data-id="52" href="javascript:viod();">删除</a>
                        </div>
                    </a>
                </div>
                <div id="projectInfo50" class="tr clearfix ">
                    <a href="/ProjectDetail/Index?PID=50">
                        <div class="td w10">16-12257-1</div>
                        <div class="td w10">CapitaLand-Chengdu</div>
                        <div class="td w15">￥0</div>
                        <div class="td w10">Frank Xu</div>
                        <div class="td w10">2017/1/12 11:26:14</div>
                        <div class="td w10">0</div>
                        <div class="td w10">100.2</div>
                        <div class="td w10">
                            <span class="text-blue">
                                            进行中
                                        </span>
                        </div>
                        <div class="td w15">
                            <a href="/ProjectDetail/Index?PID=50">查看</a>
                            /
                            <a href="/ProjectEntering/Index?PID=50">修改</a>
                            /
                            <a name="aDeleteProject" data-id="50" href="javascript:viod();">删除</a>
                        </div>
                    </a>
                </div>
                <div id="projectInfo22" class="tr clearfix ">
                    <a href="/ProjectDetail/Index?PID=22">
                        <div class="td w10">test</div>
                        <div class="td w10">test</div>
                        <div class="td w15">￥2</div>
                        <div class="td w10">admin</div>
                        <div class="td w10">2017/1/10 16:12:29</div>
                        <div class="td w10">4.4</div>
                        <div class="td w10">10.5</div>
                        <div class="td w10">
                            <span class="text-green">完成</span>
                        </div>
                        <div class="td w15">
                            <a href="/ProjectDetail/Index?PID=22">查看</a>
                        </div>
                    </a>
                </div>

            </div>
            <!-------------分页开始-------------->
            <div class="show-page padding-big-right ">

                <div class="page">
                    <ul class="offcial-page margin-top margin-big-right">
                        <li>共<em class="margin-small-left margin-small-right">6</em>条数据</li>
                        <li>每页显示<em class="margin-small-left margin-small-right">15</em>条</li>
                        <li>
                            <a class="next disable" href="javascript:void();" id="aPre">上一页</a>
                        </li>
                        <li>
                            <a class="next disable">1</a>
                        </li>
                        <li>
                            <a class="next disable" href="javascript:void();" id="aNext">下一页</a>
                        </li>
                        <li><span class="fl">共<em class="margin-small-left margin-small-right">1</em>页</span></li>
                    </ul>
                </div>
            </div>
            <!-------------分页结束-------------->
        </div>
        

    </body>

</html>
html

这种方式实际是把div处理了一下，重新创建了一个隐藏的div，把div布局的内容转换成table布局的内容放到隐藏的div中，中间用了jq的标签替换。(有更好的方法欢迎讨论)

里面用到基于bootstrap的时间控件 资源下载

js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)

标签：粘贴   table   collect   off   component   lin   项目   isp   span   

原文地址：http://www.cnblogs.com/tpfOfBlog/p/6285874.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！