Add page breaks

backend/public/assets/javascripts/main.js

@@ -149,35 +149,33 @@ let resumeButton = document.getElementById("resume-button");
 // Generate PDF with html2pdf.js
 function generateResume() {
     // PDF filename change depending of the light/dark mode
-    if (document.body.classList.contains(darkTheme)) {
+    let theme = document.body.classList.contains(darkTheme) ? 'dark' : 'light';
+
     // html2pdf.js options
     let opt = {
         margin: 0,
-            filename: 'myResumeCV-dark.pdf',
+        filename: 'myResumeCV-' + theme + '.pdf',
         image: { type: 'jpeg', quality: 0.98 },
         html2canvas: { scale: 4, useCORS: true },
-            jsPDF: { format: 'a4', orientation: 'portrait' }
+        jsPDF: { format: 'a4', orientation: 'portrait' },
+        pagebreak: { mode: 'css', avoid: ['.experience_content', '.education_content', '.section-title'] }
     };
-        html2pdf(areaCV, opt);
+
-    } else {
+    return html2pdf().set(opt).from(areaCV).toContainer().then(function () {
-        // html2pdf.js options
+        // Stretch the copy being rendered to a whole number of pages, so the
-        let opt = {
+        // left column background reaches the bottom of the last page.
-            margin: 0,
+        // 1px less avoids a blank extra page from rounding.
-            filename: 'myResumeCV-light.pdf',
+        let pageHeight = this.prop.pageSize.inner.px.height;
-            image: { type: 'jpeg', quality: 0.98 },
+        let resume = this.prop.container.firstElementChild;
-            html2canvas: { scale: 4, useCORS: true },
+        let pages = Math.ceil(resume.offsetHeight / pageHeight);
-            jsPDF: { format: 'a4', orientation: 'portrait' }
+        resume.style.minHeight = (Math.floor(pages * pageHeight) - 1) + 'px';
-        };
+    }).save();
-        html2pdf(areaCV, opt);
-    }
 }
 
 // Action executed by clicking on the button => generation of the final PDF CV CV
 resumeButton.addEventListener("click", () => {
     // Adapt the area of the PDF
     addScaleCV();
-    // Generate the PDF
+    // Generate the PDF, then remove the adaptation once it is saved
-    generateResume();
+    generateResume().finally(removeScaleCV);
-    // Remove adaptation after 1 second (you can choose to set more than 1 second if your PDF download time is long)
-    setTimeout(removeScaleCV, 1000);
 });

backend/public/assets/stylesheets/style.css

@@ -123,7 +123,20 @@ body.scale-cv {
 }
 
 .scale-cv .resume {
-    height: 1122px;
+    /* At least one A4 page; grows so html2pdf can split it onto more pages */
+    min-height: 1122px;
+}
+
+/* Keep entries and section titles together when breaking to a new page */
+.scale-cv .experience_content,
+.scale-cv .education_content,
+.scale-cv .section-title {
+    break-inside: avoid;
+}
+
+/* Put <div class="page-break"></div> in the template to start a new PDF page there */
+.page-break {
+    break-before: page;
 }
 
 .scale-cv .resume_left {

backend/userKnowledge.json

@@ -6,7 +6,7 @@
   "birth": "14, November, 2000",
   "living_location": "Ljubljana, Slovenia",
   "web_link": "https://petrovv.com",
-  "git_link": "https://git.petrovv.com/explore",
+  "git_link": "https://git.petrovv.com",
   "email": "nikola@petrovv.com",
   "instagram_handle": "@nikolainsta7",
   "instagram_link": "https://www.instagram.com/nikolainsta7",

backend/views/cv2.hbs

@@ -216,6 +216,8 @@
           </div>
         </section>
         
+        <div class="page-break"></div>
+        
         <!-- EDUCATION -->
         <section class="education section" id="education">
           <h2 class="section-title">Education</h2>