Improvement - PDF - Add orientation and overflowTolerance config options #243

Author: graphieros

src/pdf.js

@@ -1,23 +1,27 @@
 import { domToPng } from "./dom-to-png";
 
-export default async function pdf({ domElement, fileName, scale = 2, options = {} }) {
+export default async function pdf({
+    domElement,
+    fileName,
+    scale = 2,
+    orientation = "auto", // 'auto' | 'portrait' | 'landscape'
+    overflowTolerance = 0.2, // up to +n% height overflow gets squeezed onto 1 page
+}) {
     if (!domElement) return Promise.reject("No domElement provided");
 
-    const isSafari = typeof navigator !== 'undefined' &&
+    const isSafari =
+        typeof navigator !== "undefined" &&
         /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
     let JsPDF;
-
     try {
-        JsPDF = (await import('jspdf')).default;
-    } catch (e) {
-        return Promise.reject('jspdf is not installed. Run npm install jspdf')
+        JsPDF = (await import("jspdf")).default;
+    } catch (_) {
+        return Promise.reject("jspdf is not installed. Run npm install jspdf");
     }
 
-    const a4 = {
-        width: 595.28,
-        height: 841.89,
-    };
+    const A4_PORTRAIT = { width: 595.28, height: 841.89 };
+    const A4_LANDSCAPE = { width: 841.89, height: 595.28 };
 
     if (isSafari) {
         // Warming up in Safari, because it never works on the first try
@@ -32,54 +36,82 @@ export default async function pdf({ domElement, fileName, scale = 2, options = {
     }
 
     const imgData = await domToPng({ container: domElement, scale });
+
     return await new Promise((resolve, reject) => {
         const img = new window.Image();
         img.onload = function () {
+            const EPS = 0.5; // small epsilon to avoid off-by-one paging due to rounding
+
             const contentWidth = img.naturalWidth;
             const contentHeight = img.naturalHeight;
 
-            let imgWidth = a4.width;
-            let imgHeight = (a4.width / contentWidth) * contentHeight;
-
-            const pdf = new JsPDF("", "pt", "a4");
-            let position = 0;
-            let leftHeight = contentHeight;
-            const pageHeight = (contentWidth / a4.width) * a4.height;
-
-            if (leftHeight < pageHeight) {
-                pdf.addImage(
-                    imgData,
-                    "PNG",
-                    0,
-                    0,
-                    imgWidth,
-                    imgHeight,
-                    "",
-                    "FAST"
-                );
+            const chosenOrientation =
+                orientation === "auto"
+                    ? contentHeight >= contentWidth
+                        ? "p"
+                        : "l"
+                    : orientation;
+
+            const a4 =
+                chosenOrientation === "l" ? A4_LANDSCAPE : A4_PORTRAIT;
+
+            const ratioToWidth = a4.width / contentWidth;
+            const ratioToHeight = a4.height / contentHeight;
+            const scaledHeightAtWidth = contentHeight * ratioToWidth;
+
+            let mode = "single"; // 'single' | 'multi'
+            let ratio;
+
+            if (scaledHeightAtWidth <= a4.height + EPS) {
+                ratio = ratioToWidth;
+            } else if (scaledHeightAtWidth <= a4.height * (1 + overflowTolerance)) {
+                ratio = Math.min(ratioToWidth, ratioToHeight);
+            } else {
+                mode = "multi";
+                ratio = ratioToWidth;
+            }
+
+            const imgWidth = contentWidth * ratio;
+            const imgHeight = contentHeight * ratio;
+
+            const x = (a4.width - imgWidth) / 2;
+
+            const pdf = new JsPDF({
+                orientation: chosenOrientation,
+                unit: "pt",
+                format: "a4"
+            });
+
+            if (mode === "single") {
+                const y = (a4.height - imgHeight) / 2;
+                pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight, "", "FAST");
             } else {
-                while (leftHeight > 0) {
+                const pageHeightInImagePx = a4.height / ratio;
+
+                let leftHeight = contentHeight;
+                let positionY = 0;
+
+                while (leftHeight > EPS) {
                     pdf.addImage(
                         imgData,
                         "PNG",
-                        0,
-                        position,
+                        x,
+                        positionY,
                         imgWidth,
                         imgHeight,
                         "",
                         "FAST"
                     );
-                    leftHeight -= pageHeight;
-                    position -= a4.height;
-                    if (leftHeight > 0) {
-                        pdf.addPage();
-                    }
+                    leftHeight -= pageHeightInImagePx;
+                    positionY -= a4.height;
+                    if (leftHeight > EPS) pdf.addPage();
                 }
             }
+
             pdf.save(`${fileName}.pdf`);
             resolve();
         };
-        img.onerror = err => reject("Failed to load image for PDF: " + err);
+        img.onerror = (err) => reject("Failed to load image for PDF: " + err);
         img.src = imgData;
     });
 }

src/useConfig.js

@@ -207,12 +207,9 @@ export function useConfig() {
             },
             buttonTitles,
             print: {
-                allowTaint: false,
-                backgroundColor: COLOR_WHITE,
-                useCORS: false,
-                onclone: null,
                 scale: 2,
-                logging: false
+                orientation: 'auto', // 'auto' | 'l' | 'p'
+                overflowTolerance: 0.2,
             }
         }
     }

src/usePrinter.js

@@ -21,7 +21,9 @@ export function usePrinter({
                     await pdf({
                         domElement: document.getElementById(elementId),
                         fileName,
-                        options
+                        orientation: options.orientation,
+                        overflowTolerance: options.overflowTolerance,
+                        scale: options.scale
                     });
                 } catch (error) {
                     console.error("Error generating PDF:", error);

types/vue-data-ui.d.ts

@@ -267,14 +267,10 @@ declare module "vue-data-ui" {
             table?: null | (() => void);
             tooltip?: null | (() => void);
         };
-        // old html2canvas options
         print?: {
-            allowTaint?: boolean;
-            backgroundColor?: string;
-            useCORS?: boolean;
-            onclone?: null | ((doc: Document) => void);
             scale?: number;
-            logging?: boolean;
+            orientation?: 'auto' | 'l' | 'p';
+            overflowTolerance?: number;
         };
     };