<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <table border="0" cellspacing="0" cellpadding="0" id="datatable" class="xd_table_sj"> <tbody> <tr> <td><div align="center" id="titlelable">起始時間</div></td> <td><div align="center" id="titlelable">通信地點</div></td> <td><div align="center" id="titlelable">上網方式</div></td> <td><div align="center" id="titlelable">總時長</div></td> <td><div align="center" id="titlelable">總流量</div></td> <td><div align="center" id="titlelable">套餐優惠</div></td> <td><div align="center" id="titlelable">優惠或減免</div></td> <td><div align="center" id="titlelable">通信費</div></td> <td><div align="center" id="titlelable">終端類型</div></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 01:57:05</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.001</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 01:58:55</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.007</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 07:00:00</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.001</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 07:23:19</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.084</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 08:16:31</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.001</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 08:16:39</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.06</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 08:28:44</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.002</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 08:34:50</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.259</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 08:34:50</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>1.26</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 09:54:53</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>1.357</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 09:56:29</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.003</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 09:56:31</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.009</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 09:56:33</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.583</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 10:27:16</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.001</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 10:28:58</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.004</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 12:44:12</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.001</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 12:45:41</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.411</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 12:57:42</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.024</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);"> <td>10-01 12:57:50</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.009</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> <tr bgcolor="#ffffff" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#ffffff'" style="background: rgb(255, 255, 255);"> <td>10-01 12:57:52</td> <td></td> <td>CMNET</td> <td>0秒</td> <td>0.007</td> <td>校園4G套餐-400M國內流量</td> <td></td> <td>0.00</td> <td></td> </tr> </tbody> </table> <button>導出EXCEL</button> <script src="js/jquery.js"></script> <script src="js/jquery.table2excel.js"></script> <script> $('button').click(function(){ console.log(1) $("#datatable").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "myFileName", exclude_img: true, exclude_links: true, exclude_inputs: true }); }) // table2excel插件的可用配置參數有： // // exclude：不被導出的表格行的CSS class類。 // name：導出的Excel文檔的名稱。 // filename：Excel文件的名稱。 // exclude_img：是否導出圖片。 // exclude_links：是否導出超鏈接 // exclude_inputs：是否導出輸入框中的內容。 </script> </body> </html>
瀏覽器展示：
點擊導出EXCEL----瀏覽器自動下載excel文件到本地；效果：
jquery.table2excel.js要基於jquery的基礎上才能使用，是一款專門導入excel的插件