1. 程式人生 > >HTML頁面中的表格匯出為EXCEL檔案

HTML頁面中的表格匯出為EXCEL檔案

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檔案,在此標註,僅供參考