JS導出excel設置下載的標題/與angular結合衝突

時間 2019-11-20

標籤導出 excel 設置下載標題 angular 結合衝突欄目 JavaScript 简体版

原文原文鏈接

2017.8更新javascript

此功能與angular結合使用時，最後一行 document.getElementById("dlink").click(); 與angular的ng-click 有衝突，刪掉最後一行便可。css

以前寫過一篇js導出excel的文章，發現下載的文件名爲「下載」，如何修改文件名呢？找了一些文章仍是不太明白，經牛人指點，幡然領悟。注意看紅字標明部分html

  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>