1 js導出Excel 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <style type="text/css"> 7 table{border-collapse: collapse; } 8 th, td{border: 1px solid #4d4d4d;padding: 5px; } 9 </style> 10 <script type="text/javascript" language="javascript"> 11 var idTmr; 12 function getExplorer() { 13 var explorer = window.navigator.userAgent ; 14 //ie 15 if (explorer.indexOf("MSIE") >= 0) { 16 return 'ie'; 17 } 18 //firefox 19 else if (explorer.indexOf("Firefox") >= 0) { 20 return 'Firefox'; 21 } 22 //Chrome 23 else if(explorer.indexOf("Chrome") >= 0){ 24 return 'Chrome'; 25 } 26 //Opera 27 else if(explorer.indexOf("Opera") >= 0){ 28 return 'Opera'; 29 } 30 //Safari 31 else if(explorer.indexOf("Safari") >= 0){ 32 return 'Safari'; 33 } 34 } 35 function method1(tableid) {//整個表格拷貝到EXCEL中 36 if(getExplorer()=='ie') { 37 var curTbl = document.getElementById(tableid); 38 var oXL = new ActiveXObject("Excel.Application"); 39 40 //建立AX對象excel 41 var oWB = oXL.Workbooks.Add(); 42 //獲取workbook對象 43 var xlsheet = oWB.Worksheets(1); 44 //激活當前sheet 45 var sel = document.body.createTextRange(); 46 sel.moveToElementText(curTbl); 47 //把表格中的內容移到TextRange中 48 sel.select; 49 //全選TextRange中內容 50 sel.execCommand("Copy"); 51 //複製TextRange中內容 52 xlsheet.Paste(); 53 //粘貼到活動的EXCEL中 54 oXL.Visible = true; 55 //設置excel可見屬性 56 57 try { 58 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); 59 } catch (e) { 60 print("Nested catch caught " + e); 61 } finally { 62 oWB.SaveAs(fname); 63 64 oWB.Close(savechanges = false); 65 //xls.visible = false; 66 oXL.Quit(); 67 oXL = null; 68 //結束excel進程,退出完成 69 //window.setInterval("Cleanup();",1); 70 idTmr = window.setInterval("Cleanup();", 1); 71 } 72 } else { 73 tableToExcel('ta') 74 } 75 } 76 function Cleanup() { 77 window.clearInterval(idTmr); 78 CollectGarbage(); 79 } 80 81 /* 82 template : 定義文檔的類型,至關於html頁面中頂部的<!DOCTYPE> 聲明。(我的理解,不肯定) 83 encodeURIComponent:解碼 84 unescape() 函數:對經過 escape() 編碼的字符串進行解碼。 85 window.btoa(window.encodeURIComponent(str)):支持漢字進行解碼。 86 \w :匹配包括下劃線的任何單詞字符。等價於’[A-Za-z0-9_]’ 87 replace()方法:用於在字符串中用一些字符替換另外一些字符,或替換一個與正則表達式匹配的子串。 88 {(\w+)}:匹配全部 {1個或更多字符} 形式的字符串;此處匹配輸出內容是 「worksheet」 89 正則中的() :是爲了提取匹配的字符串。表達式中有幾個()就有幾個相應的匹配字符串。 90 講解(/{(\w+)}/g, function(m, p) { return c[p]; } : 91 /{(\w+)}/g 匹配出全部形式爲「{worksheet}」的字符串; 92 function參數: m 正則所匹配到的內容,即「worksheet」; 93 p 正則表達式中分組的內容,即「(\w+)」分組中匹配到的內容,爲「worksheet」; 94 c :爲object,見下圖3 95 c[p] : 爲「worksheet」 96 97 */ 98 var tableToExcel = (function() { 99 /* 100 * 設置樣式 有2個方法 1.直接寫style 屬性 2.在模板中加樣式代碼 以下 101 * */ 102 var uri = 'data:application/vnd.ms-excel;base64,', 103 //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>', 104 template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' + 105 'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' 106 + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' 107 + '</x:ExcelWorkbook></xml><![endif]-->' + 108 ' <style type="text/css">' + 109 'table td {' + 110 'border: 1px solid #000000;' + 111 'width: 200px;' + 112 'height: 30px;' + 113 ' text-align: center;' + 114 'background-color: #4f891e;' + 115 'color: #ffffff;' + 116 ' }' + 117 '</style>' + 118 '</head><body ><table class="excelTable">{table}</table></body></html>'; 119 base64 = function(s) { 120 return window.btoa(unescape(encodeURIComponent(s))) 121 }, 122 // 下面這段函數做用是:將template中的變量替換爲頁面內容ctx獲取到的值 123 format = function(s, c) { 124 return s.replace(/{(\w+)}/g, 125 function(m, p) { 126 return c[p]; 127 } 128 ) 129 }; 130 return function(table, name) { 131 if (!table.nodeType) { 132 table = document.getElementById(table) 133 } 134 // 獲取表單的名字和表單查詢的內容 135 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; 136 // format()函數:經過格式操做使任意類型的數據轉換成一個字符串 137 // base64():進行編碼 138 window.location.href = uri + base64(format(template, ctx)) 139 // 下面這個是自定義文件名的 140 document.getElementById("exportExcel").href = uri 141 + base64(format(template, ctx)); 142 document.getElementById("exportExcel").download = name + ".xls";//自定義文件名 143 document.getElementById("exportExcel").click(); } 144 })() 145 </script> 146 147 </head> 148 <body> 149 <table id="ta"> 150 <tr> 151 <th></th> 152 <th>一</th> 153 <th>二</th> 154 <th>三</th> 155 <th>四</th> 156 </tr> 157 <tr> 158 <td>萬籟寂無聲</td> 159 <td>衾鐵棱棱近五更</td> 160 <td>香斷燈昏吟未穩</td> 161 <td>悽清</td> 162 <td>只有霜華伴月明</td> 163 </tr> 164 <tr> 165 <td>應是夜寒凝</td> 166 <td>惱得梅花睡不成</td> 167 <td>我念梅花花念我</td> 168 <td>關情</td> 169 <td>起看清冰滿玉瓶</td> 170 </tr> 171 </table> 172 <br/> 173 <input type="button" value="導出EXCEL" onclick="method1('ta')" /> 174 </body> 175 </html>