第一种导出table布局的表格
1 <html> 2 3 <head> 4 <meta charset="utf-8"> 5 <script type="text/javascript" language="javascript"> 6 var idTmr; 7 8 function getExplorer() { 9 var explorer = window.navigator.userAgent; 10 //ie 11 if(explorer.indexOf(".NET") >= 0) { 12 return 'ie'; 13 } 14 //firefox 15 else if(explorer.indexOf("Firefox") >= 0) { 16 return 'Firefox'; 17 } 18 //Chrome 19 else if(explorer.indexOf("Chrome") >= 0) { 20 return 'Chrome'; 21 } 22 //Opera 23 else if(explorer.indexOf("Opera") >= 0) { 24 return 'Opera'; 25 } 26 //Safari 27 else if(explorer.indexOf("Safari") >= 0) { 28 return 'Safari'; 29 } 30 } 31 32 function method1(tableid, name, filename) { //整个表格拷贝到EXCEL中 33 if(getExplorer() == 'ie') { 34 var curTbl = document.getElementById(tableid); 35 var oXL = new ActiveXObject("Excel.Application"); 36 37 //创建AX对象excel 38 var oWB = oXL.Workbooks.Add(); 39 //获取workbook对象 40 var xlsheet = oWB.Worksheets(1); 41 //激活当前sheet 42 var sel = document.body.createTextRange(); 43 sel.moveToElementText(curTbl); 44 //把表格中的内容移到TextRange中 45 sel.select(); 46 //全选TextRange中内容 47 sel.execCommand("Copy"); 48 //复制TextRange中内容 49 xlsheet.Paste(); 50 //粘贴到活动的EXCEL中 51 oXL.Visible = true; 52 //设置excel可见属性 53 54 try { 55 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); 56 } catch(e) { 57 print("Nested catch caught " + e); 58 } finally { 59 oWB.SaveAs(fname); 60 61 oWB.Close(savechanges = false); 62 //xls.visible = false; 63 oXL.Quit(); 64 oXL = null; 65 //结束excel进程，退出完成 66 //window.setInterval("Cleanup();",1); 67 idTmr = window.setInterval("Cleanup();", 1); 68 69 } 70 71 } else { 72 tableToExcel(tableid, name, filename) 73 } 74 } 75 76 function Cleanup() { 77 window.clearInterval(idTmr); 78 CollectGarbage(); 79 } 80 var tableToExcel = (function() { 81 var uri = 'data:application/vnd.ms-excel;base64,', 82 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><meta charset="UTF-8"><!--[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>', 83 base64 = function(s) { 84 return window.btoa(unescape(encodeURIComponent(s))) 85 }, 86 format = function(s, c) { 87 return s.replace(/{(\w+)}/g, 88 function(m, p) { 89 return c[p]; 90 }) 91 } 92 return function(table, name, filename) { 93 if(!table.nodeType) table = document.getElementById(table) 94 var ctx = { 95 worksheet: name || 'Worksheet', 96 table: table.innerHTML 97 } 98 //window.location.href = uri + base64(format(template, ctx)) 99 //<a href="/images/logo.png" download="w3clogo"> //参考a链接的下载，更改下载文件名 100 //<img border="0" src="/images/logo.png" alt="w3cschool.cc" > 101 //</a> 102 document.getElementById("dlink").href = uri + base64(format(template, ctx)); 103 document.getElementById("dlink").download = filename; //这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了 104 document.getElementById("dlink").click(); 105 } 106 })() 107 </script> 108 <style> 109 .bk { 110 background-color: red; 111 color: blue; 112 text-align: center; 113 } 114 </style> 115 </head> 116 117 <body> 118 <table id="targetTable"> 119 <tr align="center" id='th'> 120 <td>标识</td> 121 <td>内容</td> 122 <td>创建时间</td> 123 </tr> 124 <tr id="tr1" class="bk"> 125 <a> 126 <td>1</td> 127 <td>excel01</td> 128 <td>2015-07-22</td> 129 </a> 130 </tr> 131 <tr align="center" style="background-color: red;color:yellow;"> 132 <td>2</td> 133 <td>excel02</td> 134 <td>2015-07-22</td> 135 </tr> 136 <tr align="center" id="tr3"> 137 <a> 138 <td>1</td> 139 <td>excel01</td> 140 <td>2015-07-22</td> 141 </a> 142 </tr> 143 </table> 144 </br> 145 <span>span</span> 146 <a id="dlink" style="display:none;"></a><!--隐藏链接，设置下载文件名 利用download属性--> 147 <input id="Button1" type="button" value="导出EXCEL" onclick="javascript:method1('targetTable', 'name', 'myfile.xls')" /> 148 <script> 149 //导出execl时只有标签上的样式才会影响到导出的execl的样式，通过类渲染的最终样式没用 150 document.getElementById('tr3').style.backgroundColor = "yellow"; 151 var th = document.getElementById('th'); 152 var a = document.getElementById('tr1'); 153 var color = window.getComputedStyle(a).getPropertyValue("background-color"); //获取最终样式，经过class渲染之后的样式 154 //alert(window.getComputedStyle(a).getPropertyValue("color")); 155 th.style.backgroundColor = color; 156 </script> 157 </body> 158 159 </html>