js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
Posted 学无止尽tpf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)相关的知识，希望对你有一定的参考价值。
第一种导出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>
在template的head标签中加了<meta charset="UTF-8">(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">......)，防止中文乱码。
其中利用了a标签的download属性来更改导出的execl名字，而且导出execl时只有标签上的样式才会影响到导出的execl的样式，通过类渲染的最终样式没用
第二种导出div布局的表格
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta name="viewport" content="width=device-width" /> 7 <meta charset="utf-8"> 8 <title>项目统计</title> 9 <link href="css/bootstrap.min.css" rel="stylesheet" /> 10 <link href="css/bootstrap-datepicker3.min.css" rel="stylesheet" /> 11 <link rel="stylesheet" type="text/css" href="css/layout.css" /> 12 <link rel="stylesheet" type="text/css" href="css/style.css" /> 13 <script src="js/jquery.min.js"></script> 14 <script src="js/layer.js"></script> 15 以上是关于js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)的主要内容，如果未能解决你的问题，请参考以下文章使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/Chrome/Firefox
使用 D3.js（IE、safari 和 chrome）创建 SVG 后，如何保存/导出 SVG 文件？