靜態表格tablejavascript
<table class="table tableStyles" id="tables">
<caption>不正經的統計表</caption><!--能夠生成表格的標題-->
<thead>
<tr>
<th>品牌</th>
<th>門店</th>
<th>本週回訪</th>
<th>本月回訪</th>
<th>總回訪</th>
<th>本週成交數</th>
<th>本月成交數</th>
<th>總成交數</th>
<th>異常量</th>
<th>成交轉化率</th>
<th>經手人/th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">華爲</td>
<td>華爲深圳店</td>
<td>20</td>
<td>80</td>
<td>500</td>
<td>1</td>
<td>3</td>
<td>20</td>
<td>1</td>
<td>4.0%</td>
<td>黃生</td>
</tr>
<tr>
<td>華爲東莞店</td>
<td>20</td>
<td>80</td>
<td>500</td>
<td>1</td>
<td>3</td>
<td>20</td>
<td>1</td>
<td>4.0%</td>
<td>黃生</td>
</tr>
<tr>
<td>華爲佛山店</td>
<td>20</td>
<td>80</td>
<td>500</td>
<td>1</td>
<td>3</td>
<td>20</td>
<td>1</td>
<td>4.0%</td>
<td>黃生</td>
</tr>
<tr>
<td rowspan="3">小米</td>
<td>米家深圳店</td>
<td>20</td>
<td>80</td>
<td>500</td>
<td>1</td>
<td>3</td>
<td>20</td>
<td>1</td>
<td>4.0%</td>
<td>林生</td>
</tr>
</tbody>
</table>
2.Js代碼html
①利用html5的download屬性，點擊下載該文件html5
<a id="dlink" style="display:none;"></a>
<input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">
<script type="text/javascript"> var tableToExcel = (function () { var uri = 'data:application/vnd.ms-excel;base64,', 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>', base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }; return function (table, name, filename) { if (!table.nodeType) table = document.getElementById(table) var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML } document.getElementById("dlink").href = uri + base64(format(template, ctx)); document.getElementById("dlink").download = filename; document.getElementById("dlink").click(); } })() </script>
②建立ActiveXObject對象複製到表格中java
1 <input id="Button1" type="button" value="導出EXCEL" onclick="javascript:excels('tables')" />
<script type="text/javascript"> var timer; function getExplorer(){//獲取瀏覽器 var explorer=window.navigator.userAgent; if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){ return 'ie'; }else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; }else if(explorer.indexOf("Chrome") >= 0){ return 'Chrome'; }else if(explorer.indexOf("Opera") >= 0){ return 'Opera'; }else if(explorer.indexOf("Safari") >= 0){ return 'Safari'; } } function excels(table){ if(getExplorer()=='ie'){ var curTbl = document.getElementById(table); var oXl=new ActiveXObject("Excel.Application");//建立AX對象excel var oWB = oXL.Workbooks.Add();//獲取workbook對象 var xlsheet = oWB.Worksheets(1);//激活當前sheet var sel = document.body.createTextRange(); sel.moveToElementText(curTbl);//把表格中的內容移到TextRange中 sel.select;//全選TextRange中內容 sel.execCommand("Copy");//複製TextRange中內容 xlsheet.Paste();//粘貼到活動的EXCEL中 oXL.Visible = true;//設置excel可見屬性 try{ var filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); }catch(e){ window.print("Nested catch caught " + e); }finally{ oWB.SaveAs(filename); oWB.Close(savechanges = false); oXL.Quit(); oXL = null;//結束excel進程，退出完成 timer = window.setInterval("Cleanup();", 1); } }else{ tableToExcel("tables"); } } function Cleanup(){ window.clearInterval(timer); CollectGarbage();//CollectGarbage,是IE的一個特有屬性,用於釋放內存的 } var tableToExcel=(function(){ var uri = 'data:application/vnd.ms-excel;base64,', 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>', base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }; return function(table, name) { if (!table.nodeType) table = document.getElementById(table); var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; window.location.href = uri + base64(format(template, ctx)) } })(); </script>
①.真正起到做用的是a標籤的屬性，input按鈕只是起到了一個過渡到download屬性的做用；node
其中有編碼解碼，須要注意中文亂碼狀況；jquery
測試只有谷歌和火狐起做用，且只有谷歌下載的文件名是「下載.xls」，火狐的文件名像是編碼後的~git
雙核瀏覽器固然也只有chrome內核下有效果~~github
還有其餘的問題是我繼續須要想的，表格內容分頁狀況導出？篩選條件後導出所有？等等等~chrome
附上源碼註釋地址：https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html瀏覽器
開發過程當中有不少預料不到的事，繼續加油吧！
~~~~~~~~~~~~剩到最後的解決辦法是利用插件~~~~~~~~~~~~
好比github上的
1020 Star：https://github.com/kayalshri/tableExport.jquery.plugin
270 Star：https://github.com/clarketm/TableExport
159 Star：https://github.com/huanz/tableExport
說明一下，星星多的插件是有base64編碼，因此還額外須要js腳本！
我的比較喜歡最少星星的庫，感受明瞭清晰，能夠按需加載~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~