網頁上的表格資料,下載轉存為 Excel (xlsx) 檔
本小站下載:
網頁表格資料轉存成 Excel 的 css 和 js紅色字部份
。順便說明一下:<!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>
名字 | 年齡 | 備註 |
---|---|---|
丁一 | 16 | TEST 一天 |
王二 | 15 | 網購交易紀錄 |
張三 | 17 | Save HTML TABLE as Excel file |
李四 | 18 | 訂單編號 901509105388 |
陳五 | 14 | HTML tables to Excel spreadsheets |