PDF-Download hinzugefügt

frontend/src/views/ScheduleView.vue

@@ -9,9 +9,11 @@
         </div>
         <div class="output">
             <ul>
-                <li v-for="league in leagues" :key="league" @click="loadMatchesForLeague(league.id, league.name)">{{ league.name }}</li>
+                <li v-for="league in leagues" :key="league" @click="loadMatchesForLeague(league.id, league.name)">{{
+                    league.name }}</li>
             </ul>
             <div class="flex-item">
+                <button @click="generatePDF">Download PDF</button>
                 <div v-if="matches.length > 0">
                     <h3>Spiele für {{ selectedLeague }}</h3>
                     <table>
@@ -57,6 +59,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import apiClient from '../apiClient.js';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
 
 export default {
     name: 'ScheduleView',
@@ -139,6 +143,34 @@ export default {
             const club = this.clubs.find(club => club.id === this.currentClub);
             console.log(club, this.currentClub);
             return club ? club.name : '';
+        },
+        async generatePDF() {
+            const element = this.$el.querySelector('.flex-item > div'); 
+            if (element) {
+                const canvas = await html2canvas(element, {
+                    scale: 2
+                });
+                const imgData = canvas.toDataURL('image/png');
+                const pdf = new jsPDF('p', 'mm', 'a4');
+                const margin = 20;
+                const imgWidth = 210 - margin * 2;
+                const pageHeight = 295 - margin * 2;
+                const imgHeight = (canvas.height * imgWidth) / canvas.width;
+                let heightLeft = imgHeight;
+                let position = margin;
+                pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
+                heightLeft -= pageHeight;
+                while (heightLeft >= 0) {
+                    position = heightLeft - imgHeight;
+                    pdf.addPage();
+                    pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
+                    heightLeft -= pageHeight;
+                }
+
+                pdf.save('Spielpläne.pdf');
+            } else {
+                console.error('No matches found to generate PDF.');
+            }
         }
     },
     async created() {