snsd0805/NCNU_Course
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 下載圖檔功能

Browse Source
This commit is contained in:
Ting-Jun Wang 2021-01-17 18:34:10 +08:00
parent d934b72192
commit 9b594d008e
Signed by: snsd0805
GPG Key ID: 8DB0D22BC1217D33
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -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>

8
js/index.vue
View File

@ -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,