HTML頁面中的表格匯出為EXCEL檔案
阿新 • • 發佈:2019-02-18
1、js檔案準備 jquery.table2excel.js
2、頁面中引入js外掛
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.table2excel.js"></script>
3、定義table的css屬性 生成匯出按鈕
<table class="table2excel"> <tr> <th>生產廠家</th> <th>產品名稱</th> <th>...</th> <th> class="noExl">操作</th> </tr> <tr> <td>廠家1<td> <td>產品1<td> <td>...<td> <td class="noExl"><button>刪除</button><button>修改</button><td> </tr> <tr> <td>廠家2<td> <td>產品2<td> <td>...<td> <td class="noExl"><button>刪除</button><button>修改</button><td> </tr> </table> <table> <tr> <td> <input type="button" value="匯出到excel中" class="btn btn-primary" onclick="table2Excel('出庫資訊明細.xls')"/> </td> </tr> </table>
4、建立table2Excel(filename)方法
//filename 匯出的excel檔名 //方法可帶filename引數,亦可不帶引數直接定義 function table2Excel(filename){ $(".table2excel").table2excel({ exclude: ".noExl",//class="noExl"的列不匯出 name: "Excel Document Name", filename: filename,//檔名稱 fileext: ".xls",//檔案字尾名 exclude_img: true,//匯出圖片 exclude_links: true,//匯出超連結 exclude_inputs: true//匯出輸入框內容 }); }
5、需要注意的點
我們的客戶多為醫院,瀏覽器基本上以XP和win7系統的ie為主,所以測試環境實在IE瀏覽器上進行的,最開始總是匯出一個沒有後綴的檔案。由於有關於fileext的字尾名設定,所以也沒有意識到是這方面的問題。直到一次測試中直接由匯出按鈕傳遞檔名稱的引數時帶上了.xls的字尾才成功匯出正確的excel檔案,在此標註,僅供參考