需求：
要求把項目中的table表格導出Excel
需求分析及解決：
既然需要導出，是報表的可能性比較大，我的項目中就是這樣，那既然是報表導出，可以是前端導出，也可以是后端導出（技術包括POI或者報表工具等），這篇文章主
要是網上找的前端導出，既然是前端導出又是報表就需要有數據，所以數據都需要你提前做好相應填充
代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格導出</title> <script language="JavaScript" type="text/javascript"> var idTmr; //獲取當前瀏覽器類型 function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; } //Chrome else if(explorer.indexOf("Chrome") >= 0){ return 'Chrome'; } //Opera else if(explorer.indexOf("Opera") >= 0){ return 'Opera'; } //Safari else if(explorer.indexOf("Safari") >= 0){ return 'Safari'; } } //獲取到類型需要判斷當前瀏覽器需要調用的方法，目前項目中火狐，谷歌，360沒有問題 //win10自帶的IE無法導出 function exportExcel(tableid) { if(getExplorer()=='ie') { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); var oWB = oXL.Workbooks.Add(); var xlsheet = oWB.Worksheets(1); var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); sel.select(); sel.execCommand("Copy"); xlsheet.Paste(); oXL.Visible = true; try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); oXL.Quit(); oXL = null; idTmr = window.setInterval("Cleanup();", 1); } } else { tableToExcel(tableid) } } function Cleanup() { window.clearInterval(idTmr); CollectGarbage(); } //判斷瀏覽器后調用的方法，把table的id傳入即可 var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', template = '<html><head><meta charset="UTF-8"></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> </head> <body> <div > <button type="button" onclick="exportExcel('tableExcel')">導出Excel</button> </div> <div id="myDiv"> <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" align="center">html 表格導出道Excel</td> </tr> <tr> <td>列標題</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> <td>eee</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> </tr> <tr> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> </tr> </table> </div> </body> </html> 重點：
把此代碼復制到記事本，命名為.html文件，用瀏覽器打開即可查看是否可以導出，如果可以導入項目中，把數據填充即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
