Jquery中使用table2excel插件实现将Html的table导出为Excel(附示例代码和资源下载)
場景
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
?
總結
以上是生活随笔為你收集整理的Jquery中使用table2excel插件实现将Html的table导出为Excel(附示例代码和资源下载)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET中新建MVC项目并连接Sq
- 下一篇： IIS部署时提示:InvalidOper