網頁上的表格資料轉存為 Excel 檔 (PDF 檔) Export a Table to Excel Save HTML TABLE as Excel file
網頁上的表格資料，下載轉存為 Excel (xlsx) 檔
- 利用一些寫好的 css 和 js，就可輕鬆的達到此目的，有興趣者不妨看看唄！
本小站下載： 網頁表格資料轉存成 Excel 的 css 和 js- 下載檔案內含轉 PDF 語法，不過存成 PDF 後，中文會變成亂碼。畢竟這是外國人寫的，所以沒把中文考慮在內。有興趣的高手再自行去修改 jszip.min.js 或 shieldui-all.min.js，讓它可顯示中文不亂碼唄！若有改成功記得告知一下喔！^^
範例程式碼：
- 主要看
紅色字部份。順便說明一下：
- 必要引入 jszip.min.js、shieldui-all.min.js 、jquery.js、all.min.css (此可有可無)。
- 表格標頭欄位必須<th></th>，其它就看程式碼內的附註說明吧！
- 存成的 Excel 檔格式是 xlsx。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>喵喵笨兔 - 網頁表格資料轉存成 Excel 檔案</title>
<!-- all.min.css 沒引入也可以 -->
<link rel="stylesheet" href="css/all.min.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jszip.min.js"></script>
<script type="text/javascript" src="js/shieldui-all.min.js"></script>
</head>
<body>
<h1>網頁表格資料轉存成 Excel 檔案</h1>
<div>
<button id="exportExcel" >下載存成Excel</button>
<table id="exportTable" border="1">
<thead>
<tr>
<th>名字</th>
<th>年齡</th>
<th>備註</th>
</tr>
</thead>
<tbody>
<tr>
<td>丁一</td>
<td>16</td>
<td>TEST 一天</td>
</tr>
<tr>
<td>王二</td>
<td>15</td>
<td>網購交易紀錄</td>
</tr>
<tr>
<td>張三</td>
<td>17</td>
<td>Save HTML TABLE as Excel file</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>訂單編號 901509105388</td>
</tr>
<tr>
<td>陳五</td>
<td>14</td>
<td>HTML tables to Excel spreadsheets</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//取當天日期時間來當存檔名稱流水號(若要每次存檔名都不同就參考唄！)
var Today = new Date();
var saveNum=Today.getFullYear()+""+(Today.getMonth()+1)+""+""+Today.getDate()+""+Today.getHours()+""+Today.getMinutes()+""+Today.getSeconds();
jQuery(function ($) {
$("#exportExcel").click(function () {
// data 輸入 Table 的 id; fields 為要轉出<th>內的欄位名,不轉就不要列入; type設String字串或Number數值
var dataSource = shield.DataSource.create({
data: "#exportTable",
schema: {
type: "table",
fields: {
名字: { type: String },
年齡: { type: Number },
備註: { type: String }
}
}
});
// 第一個 cells 內是轉excel後，秀在第一行的欄位名字
// 第二個 cells 內.item 將資料轉入excel，其順序要與第一個 cells 對應
// fileName 是設定預設的存檔名
dataSource.read().then(function (data) {
new shield.exp.OOXMLWorkbook({
author: "PrepBootstrap",
worksheets: [
{
name: "PrepBootstrap Table",
rows: [
{
cells: [
{
style: {
bold: true
},
type: String,
value: "名字"
},
{
style: {
bold: true
},
type: String,
value: "年齡"
},
{
style: {
bold: true
},
type: String,
value: "備註"
}
]
}
].concat($.map(data, function(item) {
return {
cells: [
{ type: String, value: item.名字 },
{ type: Number, value: item.年齡 },
{ type: String, value: item.備註 }
]
};
}))
}
]
}).saveAs({
fileName: "Excel" + saveNum
});
});
});
});
</script>
</body>
</html>