jspdf-utils 0.1.24 → 0.1.26

package/README.md

@@ -1,6 +1,7 @@
 # jsPDF Utils
 
-HTML to PDF utilities for jsPDF with support for Arabic text, tables, and automatic page breaking.
+Utilities for rendering HTML into paginated PDF output with `jsPDF` and
+`html2canvas`.
 
 ## Installation
 
@@ -8,79 +9,129 @@ HTML to PDF utilities for jsPDF with support for Arabic text, tables, and automa
 npm install jspdf-utils jspdf html2canvas
 ```
 
-## Usage
+## Exported API
 
-```javascript
+- `generatePDF(doc, source, opts)`
+- `generateImagePDF(source, opts)`
+- `generateImages(source, opts)`
+- `previewImages(source, container, opts)`
+- `PAGE_SIZES`
+- `PAGE_MARGINS`
+- Types: `PageOptions`, `PageOptionsInput`, `ImagePDFOptions`
+
+Type import example:
+
+```ts
+import type { PageOptionsInput } from "jspdf-utils";
+```
+
+## Quick Start
+
+### 1) HTML -> vector/text PDF (`doc.html`)
+
+```ts
 import jsPDF from "jspdf";
-import { renderHTML } from "jspdf-utils";
+import { generatePDF } from "jspdf-utils";
+
+const target = document.getElementById("print-section");
+if (!target) throw new Error("Missing #print-section");
 
 const doc = new jsPDF({ unit: "mm", format: "a4" });
 
-// Add fonts if needed for Arabic/RTL text
-doc.addFont("path/to/arial.ttf", "arial", "normal", "normal");
-doc.addFont("path/to/arial-bold.ttf", "arial", "normal", "bold");
+// Optional for Arabic/RTL text:
+// doc.addFont("/fonts/arial.ttf", "arial", "normal");
+// doc.addFont("/fonts/arial-bold.ttf", "arial", "bold");
 
-// Render HTML element to PDF
-const element = document.getElementById("content");
-await renderHTML(doc, element);
+await generatePDF(doc, target, {
+  margin: { top: 20, right: 20, bottom: 20, left: 20 },
+  forcedPageCount: 1,
+});
 
 doc.save("output.pdf");
 ```
 
-## Features
+### 2) HTML -> image-based PDF (raster pages)
 
-- **Automatic page breaking**: Prevents tables and text from being split awkwardly
-- **Table splitting**: Large tables are split across pages with repeated headers
-- **Text wrapping**: Long text blocks are intelligently broken at word boundaries
-- **RTL/Arabic support**: Works with right-to-left languages when proper fonts are loaded
+```ts
+import { generateImagePDF } from "jspdf-utils";
 
-## Development
+const target = document.getElementById("print-section");
+if (!target) throw new Error("Missing #print-section");
 
-### Running the Example
+const imagePDF = await generateImagePDF(target, {
+  format: "a5",
+  imageFormat: "PNG",
+  forcedPageCount: 1,
+});
 
-```bash
-npm install
-npm run dev
-# Open http://localhost:5173
+imagePDF.save("output-image.pdf");
 ```
 
-### Project Structure
+### 3) Preview pages as images in a container
 
+```ts
+import { previewImages } from "jspdf-utils";
+
+const target = document.getElementById("print-section");
+const preview = document.getElementById("preview-container");
+if (!target || !preview) throw new Error("Missing preview elements");
+
+await previewImages(target, preview, {
+  format: "a5",
+  forcedPageCount: 1,
+});
 ```
-├── src/
-│   └── html-to-pdf.js    # Main utility functions
-├── index.html             # Example/demo page
-└── package.json
-```
 
-## API
+## Options
+
+### `PageOptionsInput`
+
+- `unit?: string` (default: `"mm"`)
+- `format?: "a0" | "a1" | "a2" | "a3" | "a4" | "a5" | "a6" | "letter" | "legal" | "tabloid"` (default: `"a4"`)
+- `pageWidth?: number` (default comes from `format`)
+- `pageHeight?: number` (default comes from `format`)
+- `margin?: number | { top?: number; right?: number; bottom?: number; left?: number }`
+
+### `ImagePDFOptions`
+
+- `imageFormat?: "JPEG" | "PNG"`
+- `imageQuality?: number`
+- `scale?: number`
+- `marginContent?: MarginContentInput`
+- `forcedPageCount?: number`
 
-### `renderHTML(doc, source, opts)`
+`forcedPageCount` behavior:
 
-Renders an HTML element to PDF.
+- Forces output to the first `N` pages only.
+- `generatePDF`: trims extra pages after `doc.html` rendering.
+- `generateImagePDF`: only rasterizes and writes first `N` pages.
+- `generateImages` and `previewImages`: only returns/displays first `N` pages.
+- Invalid values (`<= 0`, `NaN`, `Infinity`) are ignored.
 
-- **doc**: jsPDF instance
-- **source**: HTML element to render
-- **opts**: Optional configuration (overrides defaults)
+## Margin Content and Borders
 
-### `prepare(source, opts)`
+`marginContent` supports:
 
-Prepares an HTML element for rendering (used internally by renderHTML).
+- `top`, `right`, `bottom`, `left` as:
+  - `HTMLElement`, or
+  - `(page: number, totalPages: number) => HTMLElement`
+- `contentBorder` (vector rectangle)
+- `textBorder` (repeated text around page edges)
 
-Returns: `{ clone, layout, options, cleanup }`
+Rendering order:
 
-### Default Options
+- Margin content and borders are rendered beneath page content.
+- Main document content stays visually above borders/text borders.
 
-```javascript
-{
-  unit: 'mm',
-  format: 'a4',
-  pageWidth: 210,
-  pageHeight: 297,
-  margin: { top: 20, right: 20, bottom: 20, left: 20 }
-}
+## Development
+
+```bash
+npm install
+npm run dev
 ```
 
+Open [http://localhost:5173](http://localhost:5173).
+
 ## License
 
 MIT

package/dist/html-to-pdf.d.ts

@@ -48,7 +48,7 @@ export interface PrepareResult {
 /**
  * Render an HTML element to PDF using doc.html().
  */
-declare function generatePDF(doc: jsPDF, source: HTMLElement, opts?: PageOptionsInput & Pick<ImagePDFOptions, "marginContent">): Promise<jsPDF>;
+declare function generatePDF(doc: jsPDF, source: HTMLElement, opts?: PageOptionsInput & Pick<ImagePDFOptions, "marginContent" | "forcedPageCount">): Promise<jsPDF>;
 type MarginFactory = (page: number, totalPages: number) => HTMLElement;
 export interface ContentBorder {
     /** Stroke color (default: "#000000") */
@@ -99,6 +99,11 @@ export interface ImagePDFOptions {
     imageQuality?: number;
     scale?: number;
     marginContent?: MarginContentInput;
+    /**
+     * Force output to the first N pages only.
+     * Example: 1 means only page 1 is generated/exported.
+     */
+    forcedPageCount?: number;
 }
 /**
  * Render an HTML element as an image-based PDF. Each page is a rasterized

package/dist/html-to-pdf.js

@@ -1,5 +1,5 @@
-import S from "html2canvas";
-const J = {
+import P from "html2canvas";
+const K = {
   a0: [841, 1189],
   a1: [594, 841],
   a2: [420, 594],
@@ -10,7 +10,7 @@ const J = {
   letter: [215.9, 279.4],
   legal: [215.9, 355.6],
   tabloid: [279.4, 431.8]
-}, Q = {
+}, V = {
   a0: 40,
   a1: 35,
   a2: 30,
@@ -25,8 +25,8 @@ const J = {
 function M(t) {
   return { top: t, right: t, bottom: t, left: t };
 }
-function Z(t, e) {
-  const a = M(Q[e]);
+function Y(t, e) {
+  const a = M(V[e]);
   return t == null ? a : typeof t == "number" ? M(t) : {
     top: t.top ?? a.top,
     right: t.right ?? a.right,
@@ -34,21 +34,21 @@ function Z(t, e) {
     left: t.left ?? a.left
   };
 }
-function x(t = {}) {
-  const e = t.format ?? "a4", [a, n] = J[e];
+function v(t = {}) {
+  const e = t.format ?? "a4", [a, n] = K[e];
   return {
     unit: t.unit ?? "mm",
     format: e,
     pageWidth: t.pageWidth ?? a,
     pageHeight: t.pageHeight ?? n,
-    margin: Z(t.margin, e)
+    margin: Y(t.margin, e)
   };
 }
-function E(t, e) {
+function N(t, e) {
   const a = t.offsetWidth, n = e.pageWidth - e.margin.left - e.margin.right, o = n / a, r = (e.pageHeight - e.margin.top - e.margin.bottom) / o;
   return { renderedWidth: a, scale: o, contentWidthMm: n, pageContentPx: r };
 }
-function N(t, e = 210) {
+function F(t, e = 210) {
   const a = t.cloneNode(!0);
   return Object.assign(a.style, {
     position: "fixed",
@@ -60,7 +60,7 @@ function N(t, e = 210) {
     pointerEvents: "none"
   }), document.body.appendChild(a), a;
 }
-async function F(t) {
+async function O(t) {
   const e = Array.from(t.querySelectorAll("img"));
   await Promise.all(
     e.map((a) => {
@@ -71,8 +71,8 @@ async function F(t) {
     })
   );
 }
-async function K(t) {
-  await F(t);
+async function X(t) {
+  await O(t);
   const e = t.getBoundingClientRect();
   let a = e.bottom;
   for (const o of Array.from(t.querySelectorAll("*"))) {
@@ -82,27 +82,27 @@ async function K(t) {
   const n = a - e.top;
   n > t.offsetHeight && (t.style.minHeight = n + "px");
 }
-async function V(t) {
+async function tt(t) {
   const e = Array.from(t.querySelectorAll("img"));
   if (e.length === 0) return;
-  await F(t);
+  await O(t);
   const a = 2;
   for (const n of e) {
     if (!n.naturalWidth || !n.naturalHeight || n.src.startsWith("data:image/svg")) continue;
-    const o = n.offsetWidth || n.naturalWidth, i = n.offsetHeight || n.naturalHeight, r = Math.min(o * a, n.naturalWidth), h = Math.min(i * a, n.naturalHeight);
-    if (n.naturalWidth <= r && n.naturalHeight <= h && n.src.startsWith("data:"))
+    const o = n.offsetWidth || n.naturalWidth, i = n.offsetHeight || n.naturalHeight, r = Math.min(o * a, n.naturalWidth), l = Math.min(i * a, n.naturalHeight);
+    if (n.naturalWidth <= r && n.naturalHeight <= l && n.src.startsWith("data:"))
       continue;
     const s = document.createElement("canvas");
-    s.width = r, s.height = h;
-    const l = s.getContext("2d");
-    if (l)
+    s.width = r, s.height = l;
+    const g = s.getContext("2d");
+    if (g)
       try {
-        l.drawImage(n, 0, 0, r, h), n.style.width = o + "px", n.style.height = i + "px", n.src = s.toDataURL("image/png");
+        g.drawImage(n, 0, 0, r, l), n.style.width = o + "px", n.style.height = i + "px", n.src = s.toDataURL("image/png");
       } catch {
       }
   }
 }
-function P() {
+function S() {
   const t = document.createElement("style");
   return t.setAttribute("data-jspdf-utils", ""), t.textContent = "img { display: inline !important; }", document.head.appendChild(t), () => t.remove();
 }
@@ -121,20 +121,20 @@ function I(t, e) {
     t.querySelectorAll(":scope > table")
   )) {
     if (a.offsetHeight <= e) continue;
-    const n = D(a);
+    const n = k(a);
     if (!n) continue;
-    const { headerRow: o, bodyRows: i, headerHeight: r } = n, h = e - r - 2, s = [];
-    let l = [], c = 0;
+    const { headerRow: o, bodyRows: i, headerHeight: r } = n, l = e - r - 2, s = [];
+    let g = [], c = 0;
     for (const d of i) {
-      const g = d.offsetHeight;
-      c + g > h && l.length > 0 && (s.push(l), l = [], c = 0), l.push(d), c += g;
+      const h = d.offsetHeight;
+      c + h > l && g.length > 0 && (s.push(g), g = [], c = 0), g.push(d), c += h;
     }
-    l.length > 0 && s.push(l);
+    g.length > 0 && s.push(g);
     for (const d of s) {
-      const g = a.cloneNode(!1);
-      o && g.appendChild(o.cloneNode(!0));
-      for (const u of d) g.appendChild(u.cloneNode(!0));
-      a.parentNode.insertBefore(g, a);
+      const h = a.cloneNode(!1);
+      o && h.appendChild(o.cloneNode(!0));
+      for (const f of d) h.appendChild(f.cloneNode(!0));
+      a.parentNode.insertBefore(h, a);
     }
     a.remove();
   }
@@ -147,7 +147,7 @@ function L(t, e, a, n) {
     width: a
   }), n.appendChild(o), o;
 }
-function O(t, e, a, n) {
+function D(t, e, a, n) {
   let o = n + 1, i = e.length;
   for (; o < i; ) {
     const r = Math.ceil((o + i) / 2);
@@ -155,80 +155,80 @@ function O(t, e, a, n) {
   }
   return o;
 }
-function D(t) {
+function k(t) {
   const e = Array.from(t.rows);
   if (e.length === 0) return null;
   const a = e[0].querySelector("th") !== null, n = a ? e[0] : null, o = a ? e.slice(1) : e, i = n ? n.offsetHeight : 0;
   return { rows: e, hasHeader: a, headerRow: n, bodyRows: o, headerHeight: i };
 }
-function k(t, e) {
+function j(t, e) {
   for (const a of Array.from(t.querySelectorAll(":scope > *"))) {
     const n = a;
     if (n.offsetHeight <= e || n.tagName === "TABLE")
       continue;
-    const o = n.tagName, i = n.getAttribute("style") || "", r = getComputedStyle(n).width, h = (n.textContent || "").split(/\s+/).filter(Boolean), s = L(o, i, r, t), l = [];
+    const o = n.tagName, i = n.getAttribute("style") || "", r = getComputedStyle(n).width, l = (n.textContent || "").split(/\s+/).filter(Boolean), s = L(o, i, r, t), g = [];
     let c = 0;
-    for (; c < h.length; ) {
-      const d = O(s, h, e, c), g = document.createElement(o);
-      g.setAttribute("style", i), g.textContent = h.slice(c, d).join(" "), l.push(g), c = d;
+    for (; c < l.length; ) {
+      const d = D(s, l, e, c), h = document.createElement(o);
+      h.setAttribute("style", i), h.textContent = l.slice(c, d).join(" "), g.push(h), c = d;
     }
     s.remove();
-    for (const d of l)
+    for (const d of g)
       n.parentNode.insertBefore(d, n);
     n.remove();
   }
 }
-function Y(t, e, a) {
-  const n = D(t);
+function et(t, e, a) {
+  const n = k(t);
   if (!n) return !1;
   const { headerRow: o, bodyRows: i, headerHeight: r } = n;
   if (i.length < 2) return !1;
-  const h = a - r - 2;
-  if (h <= 0) return !1;
-  let s = 0, l = 0;
-  for (const g of i) {
-    if (l + g.offsetHeight > h) break;
-    l += g.offsetHeight, s++;
+  const l = a - r - 2;
+  if (l <= 0) return !1;
+  let s = 0, g = 0;
+  for (const h of i) {
+    if (g + h.offsetHeight > l) break;
+    g += h.offsetHeight, s++;
   }
   if (s === 0 || s === i.length) return !1;
   const c = t.cloneNode(!1);
   o && c.appendChild(o.cloneNode(!0));
-  for (let g = 0; g < s; g++)
-    c.appendChild(i[g].cloneNode(!0));
+  for (let h = 0; h < s; h++)
+    c.appendChild(i[h].cloneNode(!0));
   const d = t.cloneNode(!1);
   o && d.appendChild(o.cloneNode(!0));
-  for (let g = s; g < i.length; g++)
-    d.appendChild(i[g].cloneNode(!0));
+  for (let h = s; h < i.length; h++)
+    d.appendChild(i[h].cloneNode(!0));
   return e.insertBefore(c, t), e.insertBefore(d, t), t.remove(), !0;
 }
-function X(t, e, a) {
+function nt(t, e, a) {
   if (t.tagName === "TABLE" || t.tagName === "IMG") return !1;
   const n = (t.textContent || "").split(/\s+/).filter(Boolean);
   if (n.length < 2) return !1;
-  const o = t.tagName, i = t.getAttribute("style") || "", r = getComputedStyle(t).width, h = L(o, i, r, e);
-  if (h.textContent = n[0], h.offsetHeight > a)
-    return h.remove(), !1;
-  const s = O(h, n, a, 0);
-  if (h.remove(), s >= n.length) return !1;
-  const l = document.createElement(o);
-  l.setAttribute("style", i), l.textContent = n.slice(0, s).join(" ");
+  const o = t.tagName, i = t.getAttribute("style") || "", r = getComputedStyle(t).width, l = L(o, i, r, e);
+  if (l.textContent = n[0], l.offsetHeight > a)
+    return l.remove(), !1;
+  const s = D(l, n, a, 0);
+  if (l.remove(), s >= n.length) return !1;
+  const g = document.createElement(o);
+  g.setAttribute("style", i), g.textContent = n.slice(0, s).join(" ");
   const c = document.createElement(o);
-  return c.setAttribute("style", i), c.textContent = n.slice(s).join(" "), e.insertBefore(l, t), e.insertBefore(c, t), t.remove(), !0;
+  return c.setAttribute("style", i), c.textContent = n.slice(s).join(" "), e.insertBefore(g, t), e.insertBefore(c, t), t.remove(), !0;
 }
-function j(t, e) {
+function z(t, e) {
   let a = 0;
   for (; a < t.children.length; ) {
     const n = t.children[a], o = n.offsetTop, i = o + n.offsetHeight, r = (Math.floor(o / e) + 1) * e;
     if (i > r) {
-      const h = r - o;
+      const l = r - o;
       if (n.tagName === "TABLE") {
-        if (Y(
+        if (et(
           n,
           t,
-          h
+          l
         ))
           continue;
-      } else if (X(n, t, h))
+      } else if (nt(n, t, l))
         continue;
       if (n.offsetHeight <= e) {
         const s = document.createElement("div");
@@ -238,11 +238,11 @@ function j(t, e) {
     a++;
   }
 }
-function tt(t, e = {}) {
-  const a = x(e), n = P(), o = N(t, a.pageWidth);
+function ot(t, e = {}) {
+  const a = v(e), n = S(), o = F(t, a.pageWidth);
   T(o);
-  const i = E(o, a);
-  return I(o, i.pageContentPx), k(o, i.pageContentPx), j(o, i.pageContentPx), {
+  const i = N(o, a);
+  return I(o, i.pageContentPx), j(o, i.pageContentPx), z(o, i.pageContentPx), {
     clone: o,
     layout: i,
     options: a,
@@ -251,12 +251,12 @@ function tt(t, e = {}) {
     }
   };
 }
-async function rt(t, e, a = {}) {
-  const { clone: n, layout: o, options: i, cleanup: r } = tt(e, a);
+async function dt(t, e, a = {}) {
+  const { clone: n, layout: o, options: i, cleanup: r } = ot(e, a);
   try {
-    await V(n), await new Promise((h) => {
+    await tt(n), await new Promise((l) => {
       t.html(n, {
-        callback: () => h(),
+        callback: () => l(),
         width: o.contentWidthMm,
         windowWidth: o.renderedWidth,
         margin: [
@@ -270,7 +270,28 @@ async function rt(t, e, a = {}) {
   } finally {
     r();
   }
-  return a.marginContent && await _(t, a.marginContent, a), t;
+  if (a.forcedPageCount && at(t, a.forcedPageCount), a.marginContent) {
+    const l = it(t);
+    await gt(t, a.marginContent, a), rt(t, l);
+  }
+  return t;
+}
+function G(t) {
+  if (t == null || !Number.isFinite(t)) return;
+  const e = Math.floor(t);
+  if (!(e < 1))
+    return e;
+}
+function U(t, e) {
+  const a = G(e);
+  return a ? Math.min(t, a) : t;
+}
+function at(t, e) {
+  const a = G(e);
+  if (!a) return;
+  const n = t.getNumberOfPages();
+  for (let o = n; o > a; o--)
+    t.deletePage(o);
 }
 function A(t, e) {
   switch (t) {
@@ -305,7 +326,7 @@ async function B(t, e, a, n) {
     overflow: "hidden"
   }), o.appendChild(t), document.body.appendChild(o);
   try {
-    return await S(o, {
+    return await P(o, {
       scale: n,
       backgroundColor: null
     });
@@ -313,10 +334,35 @@ async function B(t, e, a, n) {
     o.remove();
   }
 }
-const v = ["top", "right", "bottom", "left"];
-async function G(t, e, a) {
+const H = ["top", "right", "bottom", "left"];
+function it(t) {
+  var o;
+  const e = (o = t.internal) == null ? void 0 : o.pages;
+  if (!Array.isArray(e)) return [];
+  const a = t.getNumberOfPages(), n = [];
+  for (let i = 1; i <= a; i++) {
+    const r = e[i];
+    n.push(Array.isArray(r) ? r.length : 0);
+  }
+  return n;
+}
+function rt(t, e) {
+  var o;
+  const a = (o = t.internal) == null ? void 0 : o.pages;
+  if (!Array.isArray(a)) return;
+  const n = Math.min(t.getNumberOfPages(), e.length);
+  for (let i = 1; i <= n; i++) {
+    const r = a[i];
+    if (!Array.isArray(r)) continue;
+    const l = e[i - 1] ?? r.length;
+    if (l < 0 || l >= r.length) continue;
+    const s = r.slice(0, l), g = r.slice(l);
+    a[i] = [...g, ...s];
+  }
+}
+async function R(t, e, a) {
   const n = {};
-  for (const o of v) {
+  for (const o of H) {
     const i = t[o];
     if (i && typeof i != "function") {
       const r = A(o, e);
@@ -330,7 +376,7 @@ async function G(t, e, a) {
   }
   return n;
 }
-function et(t, e) {
+function st(t, e) {
   return t == null ? e.margin : typeof t == "number" ? M(t) : {
     top: t.top ?? e.margin.top,
     right: t.right ?? e.margin.right,
@@ -338,10 +384,10 @@ function et(t, e) {
     left: t.left ?? e.margin.left
   };
 }
-const nt = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\u0590-\u05FF]/;
-async function R(t, e, a, n, o, i, r, h, s = !1) {
-  const l = document.createElement("div");
-  Object.assign(l.style, {
+const ct = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\u0590-\u05FF]/;
+async function E(t, e, a, n, o, i, r, l, s = !1) {
+  const g = document.createElement("div");
+  Object.assign(g.style, {
     position: "fixed",
     left: "-99999px",
     top: "0",
@@ -355,7 +401,7 @@ async function R(t, e, a, n, o, i, r, h, s = !1) {
     color: r,
     display: "flex",
     alignItems: "center",
-    gap: `${h}px`,
+    gap: `${l}px`,
     direction: s ? "rtl" : "ltr"
   });
   const c = document.createElement("span");
@@ -369,110 +415,110 @@ async function R(t, e, a, n, o, i, r, h, s = !1) {
   }), document.body.appendChild(c);
   const d = c.offsetWidth;
   c.remove();
-  const g = Math.ceil(e / (d + h)) + 2;
-  for (let u = 0; u < g; u++) {
-    const f = document.createElement("span");
-    f.textContent = t, f.style.flexShrink = "0", l.appendChild(f);
+  const h = Math.ceil(e / (d + l)) + 2;
+  for (let f = 0; f < h; f++) {
+    const m = document.createElement("span");
+    m.textContent = t, m.style.flexShrink = "0", g.appendChild(m);
   }
-  document.body.appendChild(l);
+  document.body.appendChild(g);
   try {
-    return await S(l, {
+    return await P(g, {
       scale: 3,
       backgroundColor: null,
       width: Math.ceil(e),
       height: Math.ceil(a)
     });
   } finally {
-    l.remove();
+    g.remove();
   }
 }
-async function U(t, e, a, n, o, i, r) {
+async function q(t, e, a, n, o, i, r) {
   const {
-    text: h,
+    text: l,
     color: s = "#000000",
-    fontSize: l = 2.5,
+    fontSize: g = 2.5,
     fontFamily: c = "Arial, sans-serif",
     fontWeight: d = "normal"
-  } = e, g = l * a, u = (e.gap ?? l * 0.5) * a, f = g * 0.5, m = Math.ceil(g * 2.5), p = nt.test(h), y = Math.round(i - f * 2), b = Math.round(r - f * 2), [w, C] = await Promise.all([
-    R(
-      h,
+  } = e, h = g * a, f = (e.gap ?? g * 0.5) * a, m = h * 0.5, u = Math.ceil(h * 2.5), p = ct.test(l), y = Math.round(i - m * 2), w = Math.round(r - m * 2), [b, C] = await Promise.all([
+    E(
+      l,
       y,
-      m,
-      g,
+      u,
+      h,
       c,
       d,
       s,
-      u,
+      f,
       p
     ),
-    R(
+    E(
+      l,
+      w,
+      u,
       h,
-      b,
-      m,
-      g,
       c,
       d,
       s,
-      u,
+      f,
       p
     )
-  ]), H = Math.round(m / 2);
+  ]), x = Math.round(u / 2);
   t.drawImage(
-    w,
+    b,
     0,
     0,
-    w.width,
-    w.height,
-    n + f,
-    o - H,
+    b.width,
+    b.height,
+    n + m,
+    o - x,
     y,
-    m
+    u
   ), t.drawImage(
-    w,
+    b,
     0,
     0,
-    w.width,
-    w.height,
-    n + f,
-    o + r - H,
+    b.width,
+    b.height,
+    n + m,
+    o + r - x,
     y,
-    m
-  ), t.save(), t.translate(n, o + r - f), t.rotate(-Math.PI / 2), t.drawImage(
+    u
+  ), t.save(), t.translate(n, o + r - m), t.rotate(-Math.PI / 2), t.drawImage(
     C,
     0,
     0,
     C.width,
     C.height,
     0,
-    -H,
-    b,
-    m
-  ), t.restore(), t.save(), t.translate(n + i, o + f), t.rotate(Math.PI / 2), t.drawImage(
+    -x,
+    w,
+    u
+  ), t.restore(), t.save(), t.translate(n + i, o + m), t.rotate(Math.PI / 2), t.drawImage(
     C,
     0,
     0,
     C.width,
     C.height,
     0,
-    -H,
-    b,
-    m
+    -x,
+    w,
+    u
   ), t.restore();
 }
 function W(t, e) {
-  return et(t.margin, e);
+  return st(t.margin, e);
 }
-async function ot(t, e, a, n, o, i, r, h) {
-  for (const s of v) {
-    const l = e[s];
-    if (!l) continue;
+async function $(t, e, a, n, o, i, r, l) {
+  for (const s of H) {
+    const g = e[s];
+    if (!g) continue;
     const c = A(s, n);
     let d;
-    typeof l == "function" ? d = await B(
-      l(i, r),
+    typeof g == "function" ? d = await B(
+      g(i, r),
       c.width,
       c.height,
-      h
+      l
     ) : d = a[s], t.drawImage(
       d,
       0,
@@ -486,8 +532,8 @@ async function ot(t, e, a, n, o, i, r, h) {
     );
   }
   if (e.contentBorder) {
-    const { color: s = "#000000", width: l = 0.3 } = e.contentBorder, c = W(e.contentBorder, n);
-    t.strokeStyle = s, t.lineWidth = l * o, t.strokeRect(
+    const { color: s = "#000000", width: g = 0.3 } = e.contentBorder, c = W(e.contentBorder, n);
+    t.strokeStyle = s, t.lineWidth = g * o, t.strokeRect(
       Math.round(c.left * o),
       Math.round(c.top * o),
       Math.round((n.pageWidth - c.left - c.right) * o),
@@ -496,7 +542,7 @@ async function ot(t, e, a, n, o, i, r, h) {
   }
   if (e.textBorder) {
     const s = W(e.textBorder, n);
-    await U(
+    await q(
       t,
       e.textBorder,
       o,
@@ -507,7 +553,7 @@ async function ot(t, e, a, n, o, i, r, h) {
     );
   }
 }
-function q(t, e) {
+function _(t, e) {
   const a = e.pageWidth - e.margin.left - e.margin.right, n = e.pageHeight - e.margin.top - e.margin.bottom, o = t.width, i = n / a * o, r = o / a;
   return {
     contentWidthMm: a,
@@ -521,7 +567,7 @@ function q(t, e) {
     marginLeftPx: Math.round(e.margin.left * r)
   };
 }
-function $(t, e, a) {
+function J(t, e, a) {
   const n = Math.min(
     a.contentHeightPx,
     t.height - e * a.contentHeightPx
@@ -529,23 +575,26 @@ function $(t, e, a) {
   o.width = a.pageWidthPx, o.height = a.pageHeightPx;
   const i = o.getContext("2d");
   if (!i) throw new Error("Could not get canvas context");
-  return i.fillStyle = "#ffffff", i.fillRect(0, 0, a.pageWidthPx, a.pageHeightPx), i.drawImage(
-    t,
+  return i.fillStyle = "#ffffff", i.fillRect(0, 0, a.pageWidthPx, a.pageHeightPx), { canvas: o, ctx: i, sliceHeight: n };
+}
+function Q(t, e, a, n, o) {
+  t.drawImage(
+    e,
     0,
-    e * a.contentHeightPx,
-    a.contentWidthPx,
-    n,
-    a.marginLeftPx,
-    a.marginTopPx,
-    a.contentWidthPx,
-    n
-  ), { canvas: o, ctx: i };
-}
-async function z(t, e) {
-  const a = P(), n = N(t, e.pageWidth);
+    a * n.contentHeightPx,
+    n.contentWidthPx,
+    o,
+    n.marginLeftPx,
+    n.marginTopPx,
+    n.contentWidthPx,
+    o
+  );
+}
+async function Z(t, e) {
+  const a = S(), n = F(t, e.pageWidth);
   n.style.opacity = "1", n.style.left = "-99999px", T(n);
-  const o = E(n, e);
-  return I(n, o.pageContentPx), k(n, o.pageContentPx), j(n, o.pageContentPx), await K(n), {
+  const o = N(n, e);
+  return I(n, o.pageContentPx), j(n, o.pageContentPx), z(n, o.pageContentPx), await X(n), {
     clone: n,
     layout: o,
     cleanup: () => {
@@ -553,28 +602,42 @@ async function z(t, e) {
     }
   };
 }
-async function st(t, e = {}) {
-  const { imageFormat: a = "JPEG", imageQuality: n = 0.7, scale: o = 3 } = e, i = x(e), { clone: r, cleanup: h } = await z(t, i);
+async function ft(t, e = {}) {
+  const { imageFormat: a = "JPEG", imageQuality: n = 0.7, scale: o = 3 } = e, i = v(e), { clone: r, cleanup: l } = await Z(t, i);
   try {
-    const s = await S(r, {
+    const s = await P(r, {
       scale: o,
-      backgroundColor: "#ffffff"
-    }), { jsPDF: l } = await import("jspdf"), c = q(s, i), d = Math.ceil(s.height / c.contentHeightPx), g = i.pageWidth > i.pageHeight ? "l" : "p", u = new l({
-      orientation: g,
+      backgroundColor: null
+    }), { jsPDF: g } = await import("jspdf"), c = _(s, i), d = Math.ceil(s.height / c.contentHeightPx), h = U(
+      d,
+      e.forcedPageCount
+    ), f = i.pageWidth > i.pageHeight ? "l" : "p", { marginContent: m } = e, u = m ? await R(m, i, o) : {}, p = new g({
+      orientation: f,
       unit: "mm",
       format: [i.pageWidth, i.pageHeight]
     });
-    for (let f = 0; f < d; f++) {
-      const { canvas: m, ctx: p } = $(
-        s,
-        f,
-        c
-      ), y = m.toDataURL(
+    for (let y = 0; y < h; y++) {
+      const {
+        canvas: w,
+        ctx: b,
+        sliceHeight: C
+      } = J(s, y, c);
+      m && await $(
+        b,
+        m,
+        u,
+        i,
+        c.pxPerMm,
+        y + 1,
+        h,
+        o
+      ), Q(b, s, y, c, C);
+      const x = w.toDataURL(
         `image/${a.toLowerCase()}`,
         n
       );
-      f > 0 && u.addPage([i.pageWidth, i.pageHeight], g), u.addImage(
-        y,
+      y > 0 && p.addPage([i.pageWidth, i.pageHeight], f), p.addImage(
+        x,
         a,
         0,
         0,
@@ -584,48 +647,53 @@ async function st(t, e = {}) {
         "SLOW"
       );
     }
-    return e.marginContent && await _(u, e.marginContent, e), u;
+    return p;
   } finally {
-    h();
+    l();
   }
 }
-async function at(t, e = {}) {
-  const { imageFormat: a = "PNG", imageQuality: n = 0.75, scale: o = 2 } = e, i = x(e), { clone: r, cleanup: h } = await z(t, i);
+async function lt(t, e = {}) {
+  const { imageFormat: a = "PNG", imageQuality: n = 0.75, scale: o = 2 } = e, i = v(e), { clone: r, cleanup: l } = await Z(t, i);
   try {
-    const s = await S(r, {
+    const s = await P(r, {
       scale: o,
-      backgroundColor: "#ffffff"
-    }), l = q(s, i), c = Math.ceil(s.height / l.contentHeightPx), d = [], { marginContent: g } = e, u = g ? await G(g, i, o) : {};
-    for (let f = 0; f < c; f++) {
-      const { canvas: m, ctx: p } = $(
-        s,
+      backgroundColor: null
+    }), g = _(s, i), c = Math.ceil(s.height / g.contentHeightPx), d = U(
+      c,
+      e.forcedPageCount
+    ), h = [], { marginContent: f } = e, m = f ? await R(f, i, o) : {};
+    for (let u = 0; u < d; u++) {
+      const {
+        canvas: p,
+        ctx: y,
+        sliceHeight: w
+      } = J(s, u, g);
+      f && await $(
+        y,
         f,
-        l
-      );
-      g && await ot(
-        p,
-        g,
-        u,
+        m,
         i,
-        l.pxPerMm,
-        f + 1,
-        c,
+        g.pxPerMm,
+        u + 1,
+        d,
         o
-      ), d.push(
-        m.toDataURL(
+      ), Q(y, s, u, g, w), h.push(
+        p.toDataURL(
           `image/${a.toLowerCase()}`,
           n
         )
       );
     }
-    return d;
+    return h;
   } finally {
-    h();
+    l();
   }
 }
-async function ct(t, e, a = {}) {
-  const n = x(a), o = await at(t, a);
+async function ut(t, e, a = {}) {
+  const n = v(a), o = await lt(t, a);
   e.innerHTML = "", Object.assign(e.style, {
+    display: "flex",
+    flexDirection: "column",
     direction: "ltr",
     width: "fit-content",
     height: n.pageHeight + "mm",
@@ -646,62 +714,62 @@ async function ct(t, e, a = {}) {
     }), r.style.setProperty("display", "inline", "important"), e.appendChild(r);
   }
 }
-async function _(t, e, a = {}) {
-  const n = x(a), o = t.getNumberOfPages(), i = 4, r = i * (96 / 25.4), h = P(), s = Math.round(n.pageWidth * r), l = Math.round(n.pageHeight * r), c = await G(e, n, i), d = {};
-  for (const u of v)
-    c[u] && (d[u] = c[u].toDataURL("image/png"));
-  let g;
+async function gt(t, e, a = {}) {
+  const n = v(a), o = t.getNumberOfPages(), i = 4, r = i * (96 / 25.4), l = S(), s = Math.round(n.pageWidth * r), g = Math.round(n.pageHeight * r), c = await R(e, n, i), d = {};
+  for (const f of H)
+    c[f] && (d[f] = c[f].toDataURL("image/png"));
+  let h;
   if (e.textBorder) {
-    const u = document.createElement("canvas");
-    u.width = s, u.height = l;
-    const f = u.getContext("2d");
-    if (f) {
-      const m = W(e.textBorder, n);
-      await U(
-        f,
+    const f = document.createElement("canvas");
+    f.width = s, f.height = g;
+    const m = f.getContext("2d");
+    if (m) {
+      const u = W(e.textBorder, n);
+      await q(
+        m,
         e.textBorder,
         r,
-        Math.round(m.left * r),
-        Math.round(m.top * r),
-        Math.round((n.pageWidth - m.left - m.right) * r),
-        Math.round((n.pageHeight - m.top - m.bottom) * r)
-      ), g = u.toDataURL("image/png");
+        Math.round(u.left * r),
+        Math.round(u.top * r),
+        Math.round((n.pageWidth - u.left - u.right) * r),
+        Math.round((n.pageHeight - u.top - u.bottom) * r)
+      ), h = f.toDataURL("image/png");
     }
   }
-  for (let u = 1; u <= o; u++) {
-    t.setPage(u);
-    for (const f of v) {
-      const m = e[f];
-      if (!m) continue;
-      const p = A(f, n);
-      let y, b;
-      typeof m == "function" ? y = (await B(
-        m(u, o),
+  for (let f = 1; f <= o; f++) {
+    t.setPage(f);
+    for (const m of H) {
+      const u = e[m];
+      if (!u) continue;
+      const p = A(m, n);
+      let y, w;
+      typeof u == "function" ? y = (await B(
+        u(f, o),
         p.width,
         p.height,
         i
-      )).toDataURL("image/png") : (y = d[f], b = `margin-${f}`), t.addImage(
+      )).toDataURL("image/png") : (y = d[m], w = `margin-${m}`), t.addImage(
         y,
         "PNG",
         p.x,
         p.y,
         p.width,
         p.height,
-        b,
+        w,
         "SLOW"
       );
     }
     if (e.contentBorder) {
-      const { color: f = "#000000", width: m = 0.3 } = e.contentBorder, p = W(e.contentBorder, n);
-      t.setDrawColor(f), t.setLineWidth(m), t.rect(
+      const { color: m = "#000000", width: u = 0.3 } = e.contentBorder, p = W(e.contentBorder, n);
+      t.setDrawColor(m), t.setLineWidth(u), t.rect(
         p.left,
         p.top,
         n.pageWidth - p.left - p.right,
         n.pageHeight - p.top - p.bottom
       );
     }
-    g && t.addImage(
-      g,
+    h && t.addImage(
+      h,
       "PNG",
       0,
       0,
@@ -711,13 +779,13 @@ async function _(t, e, a = {}) {
       "SLOW"
     );
   }
-  return h(), t;
+  return l(), t;
 }
 export {
-  Q as PAGE_MARGINS,
-  J as PAGE_SIZES,
-  st as generateImagePDF,
-  at as generateImages,
-  rt as generatePDF,
-  ct as previewImages
+  V as PAGE_MARGINS,
+  K as PAGE_SIZES,
+  ft as generateImagePDF,
+  lt as generateImages,
+  dt as generatePDF,
+  ut as previewImages
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspdf-utils",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Utility helpers for jsPDF's doc.html() renderer with automatic page breaking, table splitting, and RTL support",
   "type": "module",
   "main": "dist/html-to-pdf.js",