喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(上版面)
www.000webhost.com
喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(左版面)
首  頁 最新消息 遊戲攻略 遊戲影片 遊戲圖片 下載區 學習分享 留言板 FB粉絲團
 喵喵笨兔 の 喵喵的家~遊戲天地 - 將網頁上的表格資料轉存為 Excel 檔 (PDF 檔) Export a Table to Excel Save HTML TABLE as Excel file

網頁上的表格資料轉存為 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,讓它可顯示中文不亂碼唄!若有改成功記得告知一下喔!^^

範例程式碼:
  • 主要看紅色字部份。順便說明一下:
    1. 必要引入 jszip.min.js、shieldui-all.min.js 、jquery.js、all.min.css (此可有可無)。
    2. 表格標頭欄位必須<th></th>,其它就看程式碼內的附註說明吧!
    3. 存成的 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>

範例結果:

網頁表格資料轉存成 Excel 檔案

名字 年齡 備註
丁一 16 TEST 一天
王二 15 網購交易紀錄
張三 17 Save HTML TABLE as Excel file
李四 18 訂單編號 901509105388
陳五 14 HTML tables to Excel spreadsheets
笨兔隨手筆記於 2017/11/20

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.myweb.hinet.net