From 9b594d008efb631ec3f28d4aac340373dc29ad13 Mon Sep 17 00:00:00 2001
From: Ting-Jun Wang <levi900227@gmail.com>
Date: Sun, 17 Jan 2021 18:34:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8B=E8=BC=89=E5=9C=96=E6=AA=94?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html   | 14 ++++++++++++--
 js/index.vue |  8 ++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5b51773..bd21f93 100644
--- a/index.html
+++ b/index.html
@@ -53,8 +53,15 @@
                     <div class="divider-custom-line"></div>
                 </div>
                 <div class="divider-custom">
-                    <div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
-                    <div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(必須登入Facebook帳號)</button></div>
+                    <div class="row">
+                        <div class="col-4">
+                            <div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
+                            <div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(登入Facebook)</button></div>
+                        </div>
+                        <div class="col-4">
+                            <div><button class="btn btn-success" @click="generatePic()">下載圖檔</button></div>
+                        </div>
+                    </div>
                 </div>
                 <div class="row">
                     <div class="col-lg-3">
@@ -83,6 +90,7 @@
 
                     <div class="col-lg-9 table-responsive " >
                         <course-table
+                            id='course-table-div'
                             v-bind:selectCourses="selectCourses"
                             v-bind:select_c="selectCourses"
                             v-on:remove-course="removeCourse"
@@ -122,6 +130,8 @@
             <div class="container"><small>Copyright © 暨大排課表 2020</small></div>
         </div>
         
+        <!-- html2canvas -->
+        <script  src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
         <!-- Bootstrap core JS-->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
diff --git a/js/index.vue b/js/index.vue
index bf0d402..d0d036a 100644
--- a/js/index.vue
+++ b/js/index.vue
@@ -173,6 +173,14 @@ var vm = new Vue({
                 }
             }
         },
+        'generatePic': function(){
+            html2canvas(document.getElementById('course-table-div')).then(function(canvas) {
+                var a = document.createElement('a');
+                a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
+                a.download = '課表.jpg';
+                a.click();
+            });
+        }
     },
     components: {
         'course-table': courseTable,