From 9463e1dcbdc1ad00cdfb2bb9b9621d9dddb3948a Mon Sep 17 00:00:00 2001
From: Cody Zhang <g-codyzhang@gashpay.com.tw>
Date: Mon, 14 Sep 2020 17:45:07 +0800
Subject: [PATCH] init

---
 test.html | 250 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 250 insertions(+)
 create mode 100644 test.html
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..8e3f2ba
--- /dev/null
+++ b/test.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>測試檔案</title>
+
+    <!-- CSS only -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+
+    <!-- JS, Popper.js, and jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
+        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
+    </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
+        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
+    </script>
+    <!-- ExcelJS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.js"></script>
+    <!-- 因為 3.8.0 之後的版本有新加的功能，造成 IE 無法載入，所以如果要相容 IE 就先使用 3.8.0 版的，之後如果有需要新的功能，再想辦法透過 polyfill 處理 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.8.0/exceljs.js"
+        integrity="sha512-vwSn7EltjzuN+K9iDCs+g39sPCoOxGjrJw7XoTELF8gg8r54+Pm+arEBxhJUkbd8jigd7g9hXJ0ja+mWJJbW6w=="
+        crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div class="page-content">
+        <table class="table table-javascript">
+            <thead>
+                <tr role="row">
+                    <th data-title="支付工具" data-data="PaymentAgent" class="sorting_disabled" rowspan="1" colspan="1"
+                        style="width: 256px;">支付工具</th>
+                    <th data-title="通路名稱" data-data="StoreName" class="sorting_disabled" rowspan="1" colspan="1"
+                        style="width: 336px;">通路名稱</th>
+                    <th data-title="儲值筆數" data-data="DepositCount" class="sorting_disabled" rowspan="1"
+                        style="width: 256px;">儲值筆數</th>
+                    <th data-title="本次儲值金額" data-data="TransAmount" class="sorting_disabled" colspan="1"
+                        style="width: 368px;">本次儲值金額</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr role="row" class="odd">
+                    <th rowspan="2" tabindex="0">委外代收</th>
+                    <td>貝克漢健康事業</td>
+                    <td>1</td>
+                    <td>20,000</td>
+                </tr>
+                <tr class="group">
+                    <td>總計</td>
+                    <td>1</td>
+                    <td>20,000</td>
+                </tr>
+                <tr role="row" class="even">
+                    <th rowspan="2" tabindex="0">其他</th>
+                    <td>橘子支活動獎勵</td>
+                    <td>2</td>
+                    <td>200</td>
+                </tr>
+                <tr class="group">
+                    <td>總計</td>
+                    <td>2</td>
+                    <td>200</td>
+                </tr>
+                <tr role="row" class="odd">
+                    <th rowspan="2" tabindex="0">null</th>
+                    <td></td>
+                    <td>3</td>
+                    <td>4,100</td>
+                </tr>
+                <tr class="group">
+                    <td>總計</td>
+                    <td>3</td>
+                    <td>4,100</td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+    <div>
+        <button id="btnDownload" type="button" value="download">Download</button>
+    </div>
+
+    <script type="text/javascript">
+        $("#btnDownload").click(function () {
+            exportExcel($(".table-javascript"), "test.xlsx");
+        });
+
+
+
+        function exportExcel(tableElem, fileName) {
+
+            // 建立 ExcelJS 物件
+            const workbook = new ExcelJS.Workbook();
+
+            let now = new Date();
+
+            workbook.creator = "Gamapay";
+            workbook.lastModifiedBy = "Gamapay";
+            workbook.created = now;
+            workbook.modified = now;
+            workbook.lastPrinted = now;
+
+            // set workbook dates to 1904 date system
+            workbook.properties.date1904 = true;
+
+            // add worksheet
+            const sheet = workbook.addWorksheet("Sheet1");
+
+            // 建立 header
+            let headerTrs = tableElem.children("thead").children("tr");
+            for (var i = 0; i < headerTrs.length; i++) {
+                let headerThs = $(headerTrs[i]).children("th");
+                let totalColspan = 0;
+                for (var j = 0; j < headerThs.length; j++) {
+                    // 現在的行數
+                    let currRow = sheet.getRow(i);
+
+                    // 現在的格子
+                    let currCell = {
+                        c: j + totalColspan,
+                        r: i
+                    };
+
+                    // 目前的 th 物件
+                    let elemTh = $(headerThs[j]);
+
+                    // colspan
+                    let colspan = !elemTh.attr("colspan") ? "2" : elemTh.attr("colspan");
+
+                    // rowspan
+                    let rowspan = !elemTh.attr("rowspan") ? "1" : elemTh.attr("rowspan");
+
+                    // 合併欄位
+                    if (colspan != 1) {
+                        let mergeStart = currCell;
+                        let mergeEnd = {
+                            c: currCell.c + parseInt(colspan) - 1,
+                            r: currCell.r
+                        };
+
+                        sheet.mergeCells(parseCellString(mergeStart) + ":" + parseCellString(mergeEnd));
+                        
+                        totalColspan++;
+
+
+                    }
+
+                    let cell = sheet.getCell(parseCellString(currCell));
+                   
+                    console.log(elemTh.text());
+
+                    console.log(elemTh);
+                    currRow.getCell(currCell.c + 1).value = elemTh.text();
+
+                    // cell.value = elemTh.val();
+
+                    // console.log(parseCellString(currCell));
+
+                    // console.log(headerThs[j]);
+                    // console.log(colspan);
+                    // console.log(rowspan);
+                    // console.log($(headerThs[j]).text());
+                }
+            }
+
+            console.log(sheet);
+
+            // sheet.addTable({
+            //     name: "Test",
+            //     ref: "A1",
+            //     headerRow: true,
+            //     totalsRow: false,
+            //     columns: [{
+            //             name: "支付工具"
+            //         },
+            //         {
+            //             name: "通路名稱"
+            //         },
+            //         {
+            //             name: "儲值筆數"
+            //         },
+            //         {
+            //             name: "本次儲值金額"
+            //         }
+            //     ],
+            //     rows: [
+            //         ["委外代收", "貝克漢健康事業", 1, 20000],
+            //         ["", "總計", 1, 20000],
+            //         ["其它", "橘子支付活動獎勵", 2, 200],
+            //         ["", "總計", 2, 200],
+            //         ["null", "", 3, 4100],
+            //         ["", "總計", 3, 4100]
+            //     ]
+            // });
+
+        }
+
+        function parseCellString(cellElem) {
+            // 目前先定義A-Z，之後有需要再加
+            var colArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
+                "S", "T", "U", "V", "W", "X", "Y", "Z"
+            ];
+            var r = cellElem.r + 1;
+
+            return colArray[cellElem.c + 1] + r;
+
+        }
+
+        function saveByteArray(reportName, byte) {
+            var blob = new Blob([byte], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            });
+            var link = document.createElement('a');
+            link.href = window.URL.createObjectURL(blob);
+            var filename = reportName;
+            link.download = filename;
+            link.click();
+        };
+
+        function saveFile(fileName, byte) {
+            var blob = new Blob([byte], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            })
+            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                // for IE
+                window.navigator.msSaveOrOpenBlob(blob, fileName);
+            } else {
+                // other browsers
+                var a = $("<a style='display: none;'/>");
+                var url = window.URL.createObjectURL(blob, {
+                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                });
+                a.attr("href", url);
+                a.attr("download", fileName);
+                $("body").append(a);
+                a[0].click();
+                window.URL.revokeObjectURL(url);
+                a.remove();
+            }
+        }
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file

支付工具	通路名稱	儲值筆數	本次儲值金額
委外代收	貝克漢健康事業	1	20,000
委外代收	總計	1	20,000
其他	橘子支活動獎勵	2	200
其他	總計	2	200
null		3	4,100
null	總計	3	4,100