在web實際使用中，需要將頁面的表格轉換成爲EXCEL表格，原想寫個原生的，但是發現一個插件很好用——jquery.table2excel，在這寫一個簡單的demo。
參考來源
源代碼
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TABLE轉換EXCEL</title>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script>
<script src="js/jquery.table2excel.js"></script>
<style type="text/css">
.btn{
margin:20px;
}
</style>
</head>
<body>
<center>
<input class="btn" type="button" value="點擊導出">
<div class="table2excel">
<table id = 'testTable' border="1">
<tr>
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
</tr>
<tr class="noExl">
<td>100 (不導出)</td>
<td>200 (不導出)</td>
<td>300 (不導出)</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td><a href="http://www.baidu.com">baidu.com</a></td>
<td><input tyle="text" value="input 數據"></td>
<td><img src="http://yuyuan:8080/zzz/img/test.jpg" alt="image"></td>
</tr>
</table>
</div>
</center>
<script type="text/javascript">
$(function() {
$(".btn").click(function(){
$(".table2excel").table2excel({
// 不被導出的表格行的CSS class類
exclude: ".noExl",
// 導出的Excel文檔的名稱
name: "Excel Document Name",
// Excel文件的名稱
filename: "test",
//文件後綴名
fileext: ".xls",
//是否排除導出圖片
exclude_img: false,
//是否排除導出超鏈接
exclude_links: false,
//是否排除導出輸入框中的內容
exclude_inputs: false
});
});
});
</script>
</body>
</html>效果截圖
1.頁面運行效果圖
2、office 2016（我只試了這個，其他的沒裝就沒試了） 打開截圖
EXCEL文件代碼
test.xls
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet0</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table><tr><td/>標題一</td><td/>標題二</td><td/>標題三</td></tr><tr><td/>400</td><td/>500</td><td/>600</td></tr><tr><td/><a href="http://www.baidu.com">baidu.com</a></td><td/><input tyle="text" value="input 數據"></td><td/><img src="http://yuyuan:8080/zzz/img/test.jpg" alt="image"></td></tr></table></body></html>總結
- 傳入的參數默認是true（排除），需要顯示的話就設置爲false就可以了
- 然後圖片需要注意的是：圖片地址要寫一個完整的可以訪問的互聯網路徑，要不然的話excel打不開，會顯示空白的，然後你的電腦必須可以訪問互聯網
- 這個demo並沒有設置圖片和表格的樣式，有需要的自己設置
- 我打開的文件是用office2016打開的。office其他的版本，以及wps均沒有實驗，可能會有差異吧，請注意！
- office 的受保護的視圖，打開也是無法看到圖片的，請自行搜索如何取消。