首页 > 代码库 > js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
第一种导出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>
第二种导出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>
这种方式实际是把div处理了一下，重新创建了一个隐藏的div，把div布局的内容转换成table布局的内容放到隐藏的div中，中间用了jq的标签替换。(有更好的方法欢迎讨论)
里面用到基于bootstrap的时间控件 资源下载
js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。