場景
jquery-table2excel是一款可以將HTML表格的內容導出到微軟Excel電子表格中的jQuery插件。
效果
在Html中有一個表格
點擊導出按鈕
將其導出后
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
首先下載jquery和jquery.table2excel的js文件，下載方式見文末。
新建一個文件夾table2excel,然后在此目錄下新建js目錄，然后將上面兩個js文件復制到js目錄下。
然后在table2excel目錄庫下新建badao.html,代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>html 表格導出--table2excel</title> <script src="js/jquery-1.6.4.min.js"></script> <script src="js/jquery.table2excel.min.js"></script> <script language="JavaScript" type="text/javascript"> function ExportToExcel() { $("#tableExcel").table2excel({ exclude : ".noExl", //過濾位置的 css 類名 filename : "badao.xls", //文件名稱 name: "Excel Document Name.xlsx", exclude_img: false,//是否導出圖片 false導出 exclude_links: true,//是否導出鏈接 false導出 exclude_inputs: true//是否導出輸入框的值 true導出 }); } </script> </head> <body> <div > <button type="button" id="btnExport" onclick="ExportToExcel();">導出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 class="noExl"> <td>公眾號：</td> <td>列標題2</td> <td>類標題3</td> <td>列標題4</td> <td>列標題5</td> </tr> <tr> <td>aaa</td> <td colspan="2">霸道的程序猿</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td><img style="width:200px;height:200px;" src="img/badao.jpg" /></td> </tr> <tr> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> </tr> </table> </div> </body> </html>
在頁面中引入了一個相對路徑的圖片,所以在table2excel下新建img目錄，然后將badao.jpg復制到此目錄下。
使用瀏覽器打開badao.html文件即可。
在啥上面的代碼中設置按鈕的點擊事件，在按鈕的點擊事件中執行以下方法：
$("#tableExcel").table2excel({ exclude : ".noExl", //過濾位置的 css 類名 filename : "badao.xls", //文件名稱 name: "Excel Document Name.xlsx", exclude_img: false,//是否導出圖片 false導出 exclude_links: true,//是否導出鏈接 false導出 exclude_inputs: true//是否導出輸入框的值 true導出 });
即可執行導出。
注意可以設置的一些參數。這里要到處的內容包括一張照片注意要設置exclude_img為false而不是true。
但是這里的圖片的路徑是相對路徑，所在在導出的Excel中的照片的路徑也是相對路徑。
所以在導出的Excel中要顯示照片的話需要將excel移動到和badao.html同目錄下。
或者直接可以使用網絡圖片。
使用該插件導出的Excel會根據Table的跨行跨列進而跨行跨列顯示。
但是此種方式導出的Excel在打開時會有警告提示。
點擊是打開即可。
示例代碼與js資源文件下載
見下面文章末：
https://mp.weixin.qq.com/s/fT5r25RQLo0yA4o4tYxXFg