JS导出excel设置下载的标题/与angular结合冲突
2017.8更新
此功能与angular结合使用时，最后一行 document.getElementById("dlink").click(); 与angular的ng-click 有冲突，删掉最后一行即可。
之前写过一篇js导出excel的文章， 发现下载的文件名为“下载”，如何修改文件名呢？找了一些文章还是不太明白，经牛人指点，幡然领悟。注意看红字标明部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <style type="text/css"> 6 table{border-collapse: collapse; } 7 th, td{border: 1px solid #4d4d4d;padding: 5px; } 8 </style> 9 <script type="text/javascript" language="javascript"> 10 var idTmr; 11 function getExplorer() { 12 var explorer = window.navigator.userAgent ; 13 //ie 14 if (explorer.indexOf("MSIE") >= 0) { 15 return 'ie'; 16 } 17 //firefox 18 else if (explorer.indexOf("Firefox") >= 0) { 19 return 'Firefox'; 20 } 21 //Chrome 22 else if(explorer.indexOf("Chrome") >= 0){ 23 return 'Chrome'; 24 } 25 //Opera 26 else if(explorer.indexOf("Opera") >= 0){ 27 return 'Opera'; 28 } 29 //Safari 30 else if(explorer.indexOf("Safari") >= 0){ 31 return 'Safari'; 32 } 33 } 34 function method1(tableid) {//整个表格拷贝到EXCEL中 35 if(getExplorer()=='ie') { 36 var curTbl = document.getElementById(tableid); 37 var oXL = new ActiveXObject("Excel.Application"); 38 39 //创建AX对象excel 40 var oWB = oXL.Workbooks.Add(); 41 //获取workbook对象 42 var xlsheet = oWB.Worksheets(1); 43 //激活当前sheet 44 var sel = document.body.createTextRange(); 45 sel.moveToElementText(curTbl); 46 //把表格中的内容移到TextRange中 47 sel.select; 48 //全选TextRange中内容 49 sel.execCommand("Copy"); 50 //复制TextRange中内容 51 xlsheet.Paste(); 52 //粘贴到活动的EXCEL中 53 oXL.Visible = true; 54 //设置excel可见属性 55 56 try { 57 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); 58 } catch (e) { 59 print("Nested catch caught " + e); 60 } finally { 61 oWB.SaveAs(fname); 62 63 oWB.Close(savechanges = false); 64 //xls.visible = false; 65 oXL.Quit(); 66 oXL = null; 67 //结束excel进程，退出完成 68 //window.setInterval("Cleanup();",1); 69 idTmr = window.setInterval("Cleanup();", 1); 70 } 71 } else { 72 tableToExcel('ta','demo1','AAAA') 73 } 74 } 75 function Cleanup() { 76 window.clearInterval(idTmr); 77 CollectGarbage(); 78 } 79 80 /* 81 template ： 定义文档的类型，相当于html页面中顶部的<!DOCTYPE> 声明。（个人理解，不确定） 82 encodeURIComponent:解码 83 unescape() 函数：对通过 escape() 编码的字符串进行解码。 84 window.btoa(window.encodeURIComponent(str)):支持汉字进行解码。 85 \w ：匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’ 86 replace()方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 87 {(\w+)}：匹配所有 {1个或更多字符} 形式的字符串；此处匹配输出内容是 “worksheet” 88 正则中的() ：是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。 89 讲解(/{(\w+)}/g, function(m, p) { return c[p]; } ： 90 /{(\w+)}/g 匹配出所有形式为“{worksheet}”的字符串； 91 function参数： m 正则所匹配到的内容，即“worksheet”； 92 p 正则表达式中分组的内容,即“(\w+)”分组中匹配到的内容，为“worksheet”； 93 c ：为object，见下图3 94 c[p] : 为“worksheet” 95 96 */ 97 var tableToExcel = (function() { 98 var uri = 'data:application/vnd.ms-excel;base64,', 99 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>', 100 base64 = function(s) { 101 return window.btoa(unescape(encodeURIComponent(s))) 102 }, 103 // 下面这段函数作用是：将template中的变量替换为页面内容ctx获取到的值 104 format = function(s, c) { 105 return s.replace(/{(\w+)}/g, 106 function(m, p) { 107 return c[p]; 108 } 109 ) 110 }; 111 return function(table, name, filename) { 112 if (!table.nodeType) { 113 table = document.getElementById(table) 114 } 115 // 获取表单的名字和表单查询的内容 116 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; 117 // format()函数：通过格式操作使任意类型的数据转换成一个字符串 118 // base64()：进行编码 119 // window.location.href = uri + base64(format(template, ctx)) 120 document.getElementById("dlink").href = uri + base64(format(template, ctx)); 121 document.getElementById("dlink").download = filename; //这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了 122 document.getElementById("dlink").click(); 123 } 124 })() 125 </script> 126 127 </head> 128 <body> 129 <table id="ta"> 130 <tr> 131 <th></th> 132 <th>一</th> 133 <th>二</th> 134 <th>三</th> 135 <th>四</th> 136 </tr> 137 <tr> 138 <td>万籁寂无声</td> 139 <td>衾铁棱棱近五更</td> 140 <td>香断灯昏吟未稳</td> 141 <td>凄清</td> 142 <td>只有霜华伴月明</td> 143 </tr> 144 <tr> 145 <td>应是夜寒凝</td> 146 <td>恼得梅花睡不成</td> 147 <td>我念梅花花念我</td> 148 <td>关情</td> 149 <td>起看清冰满玉瓶</td> 150 </tr> 151 <tr> 152 <td style="mso-number-format:'\@'">145846124548921216561358946132</td> 153 <td style="mso-number-format:'\@'">574878924876134982136489746997</td> 154 <td style="mso-number-format:'\@'">452354689686353596814584645382</td> 155 <td style="mso-number-format:'\@'">56369+534678645354686638946132</td> 156 <td style="mso-number-format:'\@'">785325345636351216561358946132</td> 157 </tr> 158 </table> 159 <br/> 160 <a id="dlink" style="display:none;"></a> //这里是在你点击导出的按钮上方增加一个隐藏的a标签,只是为了更改标题内容 161 <input type="button" value="导出EXCEL" onclick="method1('ta')" /> 162 </body> 163 </html>
之前关于js导出excel的文章：http://www.cnblogs.com/zhangym118/p/6235801.html
