jspdf-utils 0.1.7 → 0.1.9

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

@@ -58,7 +58,11 @@ declare function splitOversizedTables(container: HTMLElement, pageContentPx: num
  * into word-boundary chunks using binary search.
  */
 declare function splitOversizedText(container: HTMLElement, pageContentPx: number): void;
-/** Insert spacer divs so that no direct child straddles a page boundary. */
+/**
+ * Insert spacer divs so that no direct child straddles a page boundary.
+ * For tables and text elements, attempts to split at the boundary first
+ * so content fills the current page before flowing to the next.
+ */
 declare function insertPageBreakSpacers(container: HTMLElement, pageContentPx: number): void;
 /**
  * Prepare an HTML element for doc.html() rendering.
@@ -70,11 +74,55 @@ declare function prepare(source: HTMLElement, opts?: Partial<PageOptions>): Prep
 /**
  * Render an HTML element to PDF using doc.html().
  */
-declare function renderHTML(doc: jsPDF, source: HTMLElement, opts?: Partial<PageOptions>): Promise<jsPDF>;
+declare function renderHTML(doc: jsPDF, source: HTMLElement, opts?: Partial<PageOptions> & Pick<ImagePDFOptions, "marginContent">): Promise<jsPDF>;
+type MarginFactory = (page: number, totalPages: number) => HTMLElement;
+export interface ContentBorder {
+    /** Stroke color (default: "#000000") */
+    color?: string;
+    /** Line width in mm (default: 0.3) */
+    width?: number;
+    /** Distance in mm from the page edge to the border (default: uses page margins). */
+    margin?: number | {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+}
+export interface TextBorder {
+    /** The text to repeat along all four edges. */
+    text: string;
+    /** Text color (default: "#000000") */
+    color?: string;
+    /** Font size in mm (default: 2.5) */
+    fontSize?: number;
+    /** Font family (default: "Arial, sans-serif") */
+    fontFamily?: string;
+    /** Gap between repetitions in mm (default: fontSize * 0.5) */
+    gap?: number;
+    /** Distance in mm from the page edge to the text border (default: uses page margins). */
+    margin?: number | {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+}
+export interface MarginContentInput {
+    top?: HTMLElement | MarginFactory;
+    right?: HTMLElement | MarginFactory;
+    bottom?: HTMLElement | MarginFactory;
+    left?: HTMLElement | MarginFactory;
+    /** Draw a rectangle border around the content area. */
+    contentBorder?: ContentBorder;
+    /** Draw a repeated-text border around the content area. */
+    textBorder?: TextBorder;
+}
 export interface ImagePDFOptions {
     imageFormat?: "JPEG" | "PNG";
     imageQuality?: number;
     scale?: number;
+    marginContent?: MarginContentInput;
 }
 /**
  * Render an HTML element as an image-based PDF. Each page is a rasterized
@@ -92,4 +140,13 @@ declare function renderPageImages(source: HTMLElement, opts?: Partial<PageOption
  * container. Each image is sized to match the page format dimensions.
  */
 declare function previewPageImages(source: HTMLElement, container: HTMLElement, opts?: Partial<PageOptions> & ImagePDFOptions): Promise<void>;
-export { PAGE_SIZES, PAGE_MARGINS, computeLayout, createPrintClone, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, renderPageImages, previewPageImages, };
+/**
+ * Add HTML content to the margin areas of each page in a jsPDF document.
+ *
+ * Each slot (top, right, bottom, left) accepts either a static HTMLElement
+ * (rendered once and reused on every page) or a factory function that
+ * receives `(page, totalPages)` and returns an HTMLElement per page
+ * (useful for page numbers or dynamic content).
+ */
+declare function addMarginContent(doc: jsPDF, content: MarginContentInput, opts?: Partial<PageOptions>): Promise<jsPDF>;
+export { PAGE_SIZES, PAGE_MARGINS, computeLayout, createPrintClone, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, renderPageImages, previewPageImages, addMarginContent, };

package/dist/html-to-pdf.js

@@ -1,5 +1,5 @@
-import T from "html2canvas";
-const k = {
+import W from "html2canvas";
+const q = {
   a0: [841, 1189],
   a1: [594, 841],
   a2: [420, 594],
@@ -10,7 +10,7 @@ const k = {
   letter: [215.9, 279.4],
   legal: [215.9, 355.6],
   tabloid: [279.4, 431.8]
-}, L = {
+}, $ = {
   a0: 40,
   a1: 35,
   a2: 30,
@@ -22,28 +22,28 @@ const k = {
   legal: 25.4,
   tabloid: 25
 };
-function W(i = {}) {
-  const e = i.format ?? "a4", [o, n] = k[e], r = i.pageWidth ?? o, t = i.pageHeight ?? n, c = L[e], a = {
-    top: c,
-    right: c,
-    bottom: c,
-    left: c
+function M(t = {}) {
+  const e = t.format ?? "a4", [a, n] = q[e], i = t.pageWidth ?? a, o = t.pageHeight ?? n, s = $[e], r = {
+    top: s,
+    right: s,
+    bottom: s,
+    left: s
   };
   return {
-    unit: i.unit ?? "mm",
+    unit: t.unit ?? "mm",
     format: e,
-    pageWidth: r,
-    pageHeight: t,
-    margin: { ...a, ...i.margin }
+    pageWidth: i,
+    pageHeight: o,
+    margin: { ...r, ...t.margin }
   };
 }
-function M(i, e) {
-  const o = i.offsetWidth, n = e.pageWidth - e.margin.left - e.margin.right, r = n / o, c = (e.pageHeight - e.margin.top - e.margin.bottom) / r;
-  return { renderedWidth: o, scale: r, contentWidthMm: n, pageContentPx: c };
+function x(t, e) {
+  const a = t.offsetWidth, n = e.pageWidth - e.margin.left - e.margin.right, i = n / a, s = (e.pageHeight - e.margin.top - e.margin.bottom) / i;
+  return { renderedWidth: a, scale: i, contentWidthMm: n, pageContentPx: s };
 }
-function A(i, e = 210) {
-  const o = i.cloneNode(!0);
-  return Object.assign(o.style, {
+function B(t, e = 210) {
+  const a = t.cloneNode(!0);
+  return Object.assign(a.style, {
     position: "fixed",
     top: "0",
     left: "0",
@@ -51,224 +51,429 @@ function A(i, e = 210) {
     width: e + "mm",
     opacity: "0.000001",
     pointerEvents: "none"
-  }), document.body.appendChild(o), o;
+  }), document.body.appendChild(a), a;
 }
-function S() {
-  const i = document.createElement("style");
-  return i.setAttribute("data-jspdf-utils", ""), i.textContent = "img { display: inline !important; }", document.head.appendChild(i), () => i.remove();
+function N() {
+  const t = document.createElement("style");
+  return t.setAttribute("data-jspdf-utils", ""), t.textContent = "img { display: inline !important; }", document.head.appendChild(t), () => t.remove();
 }
-function E(i) {
-  for (const e of i.querySelectorAll("table")) {
-    const o = e.getAttribute("cellpadding");
-    if (o) {
+function E(t) {
+  for (const e of t.querySelectorAll("table")) {
+    const a = e.getAttribute("cellpadding");
+    if (a) {
       for (const n of e.querySelectorAll("th, td"))
-        n.style.padding || (n.style.padding = o + "px");
+        n.style.padding || (n.style.padding = a + "px");
       e.removeAttribute("cellpadding");
     }
   }
 }
-function R(i, e) {
-  for (const o of Array.from(
-    i.querySelectorAll(":scope > table")
+function T(t, e) {
+  for (const a of Array.from(
+    t.querySelectorAll(":scope > table")
   )) {
-    if (o.offsetHeight <= e) continue;
-    const n = Array.from(o.rows);
+    if (a.offsetHeight <= e) continue;
+    const n = Array.from(a.rows);
     if (n.length === 0) continue;
-    const r = n[0].querySelector("th") !== null, t = r ? n[0] : null, c = r ? n.slice(1) : n, a = t ? t.offsetHeight : 0, h = e - a - 2, d = [];
-    let l = [], g = 0;
-    for (const m of c) {
-      const s = m.offsetHeight;
-      g + s > h && l.length > 0 && (d.push(l), l = [], g = 0), l.push(m), g += s;
+    const i = n[0].querySelector("th") !== null, o = i ? n[0] : null, s = i ? n.slice(1) : n, r = o ? o.offsetHeight : 0, l = e - r - 2, d = [];
+    let c = [], g = 0;
+    for (const m of s) {
+      const h = m.offsetHeight;
+      g + h > l && c.length > 0 && (d.push(c), c = [], g = 0), c.push(m), g += h;
     }
-    l.length > 0 && d.push(l);
+    c.length > 0 && d.push(c);
     for (const m of d) {
-      const s = o.cloneNode(!1);
-      t && s.appendChild(t.cloneNode(!0));
-      for (const f of m) s.appendChild(f.cloneNode(!0));
-      o.parentNode.insertBefore(s, o);
+      const h = a.cloneNode(!1);
+      o && h.appendChild(o.cloneNode(!0));
+      for (const f of m) h.appendChild(f.cloneNode(!0));
+      a.parentNode.insertBefore(h, a);
     }
-    o.remove();
+    a.remove();
   }
 }
-function N(i, e) {
-  for (const o of Array.from(i.querySelectorAll(":scope > *"))) {
-    const n = o;
+function R(t, e) {
+  for (const a of Array.from(t.querySelectorAll(":scope > *"))) {
+    const n = a;
     if (n.offsetHeight <= e || n.tagName === "TABLE")
       continue;
-    const r = n.tagName, t = n.getAttribute("style") || "", c = getComputedStyle(n).width, a = (n.textContent || "").split(/\s+/).filter(Boolean), h = document.createElement(r);
-    h.setAttribute("style", t), Object.assign(h.style, {
+    const i = n.tagName, o = n.getAttribute("style") || "", s = getComputedStyle(n).width, r = (n.textContent || "").split(/\s+/).filter(Boolean), l = document.createElement(i);
+    l.setAttribute("style", o), Object.assign(l.style, {
       position: "absolute",
       visibility: "hidden",
-      width: c
-    }), i.appendChild(h);
+      width: s
+    }), t.appendChild(l);
     const d = [];
-    let l = 0;
-    for (; l < a.length; ) {
-      let g = l + 1, m = a.length;
+    let c = 0;
+    for (; c < r.length; ) {
+      let g = c + 1, m = r.length;
       for (; g < m; ) {
         const f = Math.ceil((g + m) / 2);
-        h.textContent = a.slice(l, f).join(" "), h.offsetHeight <= e ? g = f : m = f - 1;
+        l.textContent = r.slice(c, f).join(" "), l.offsetHeight <= e ? g = f : m = f - 1;
       }
-      const s = document.createElement(r);
-      s.setAttribute("style", t), s.textContent = a.slice(l, g).join(" "), d.push(s), l = g;
+      const h = document.createElement(i);
+      h.setAttribute("style", o), h.textContent = r.slice(c, g).join(" "), d.push(h), c = g;
     }
-    h.remove();
+    l.remove();
     for (const g of d)
       n.parentNode.insertBefore(g, n);
     n.remove();
   }
 }
-function j(i, e) {
-  const o = Array.from(i.children);
-  for (const n of o) {
-    const r = n.offsetTop, t = r + n.offsetHeight, c = (Math.floor(r / e) + 1) * e;
-    if (t > c && n.offsetHeight <= e) {
-      const a = document.createElement("div");
-      a.style.height = c - r + 1 + "px", n.parentNode.insertBefore(a, n);
+function U(t, e, a) {
+  const n = Array.from(t.rows);
+  if (n.length === 0) return !1;
+  const i = n[0].querySelector("th") !== null, o = i ? n[0] : null, s = i ? n.slice(1) : n, r = o ? o.offsetHeight : 0;
+  if (s.length < 2) return !1;
+  const l = a - r - 2;
+  if (l <= 0) return !1;
+  let d = 0, c = 0;
+  for (const h of s) {
+    if (c + h.offsetHeight > l) break;
+    c += h.offsetHeight, d++;
+  }
+  if (d === 0 || d === s.length) return !1;
+  const g = t.cloneNode(!1);
+  o && g.appendChild(o.cloneNode(!0));
+  for (let h = 0; h < d; h++)
+    g.appendChild(s[h].cloneNode(!0));
+  const m = t.cloneNode(!1);
+  o && m.appendChild(o.cloneNode(!0));
+  for (let h = d; h < s.length; h++)
+    m.appendChild(s[h].cloneNode(!0));
+  return e.insertBefore(g, t), e.insertBefore(m, t), t.remove(), !0;
+}
+function _(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 i = t.tagName, o = t.getAttribute("style") || "", s = getComputedStyle(t).width, r = document.createElement(i);
+  if (r.setAttribute("style", o), Object.assign(r.style, {
+    position: "absolute",
+    visibility: "hidden",
+    width: s
+  }), e.appendChild(r), r.textContent = n[0], r.offsetHeight > a)
+    return r.remove(), !1;
+  let l = 1, d = n.length;
+  for (; l < d; ) {
+    const m = Math.ceil((l + d) / 2);
+    r.textContent = n.slice(0, m).join(" "), r.offsetHeight <= a ? l = m : d = m - 1;
+  }
+  if (r.remove(), l >= n.length) return !1;
+  const c = document.createElement(i);
+  c.setAttribute("style", o), c.textContent = n.slice(0, l).join(" ");
+  const g = document.createElement(i);
+  return g.setAttribute("style", o), g.textContent = n.slice(l).join(" "), e.insertBefore(c, t), e.insertBefore(g, t), t.remove(), !0;
+}
+function j(t, e) {
+  let a = 0;
+  for (; a < t.children.length; ) {
+    const n = t.children[a], i = n.offsetTop, o = i + n.offsetHeight, s = (Math.floor(i / e) + 1) * e;
+    if (o > s) {
+      const r = s - i;
+      if (n.tagName === "TABLE") {
+        if (U(
+          n,
+          t,
+          r
+        ))
+          continue;
+      } else if (_(n, t, r))
+        continue;
+      if (n.offsetHeight <= e) {
+        const l = document.createElement("div");
+        l.style.height = s - i + 1 + "px", n.parentNode.insertBefore(l, n), a++;
+      }
     }
+    a++;
   }
 }
-function B(i, e = {}) {
-  const o = W(e), n = S(), r = A(i, o.pageWidth);
-  E(r);
-  const t = M(r, o);
-  return R(r, t.pageContentPx), N(r, t.pageContentPx), j(r, t.pageContentPx), {
-    clone: r,
-    layout: t,
-    options: o,
+function J(t, e = {}) {
+  const a = M(e), n = N(), i = B(t, a.pageWidth);
+  E(i);
+  const o = x(i, a);
+  return T(i, o.pageContentPx), R(i, o.pageContentPx), j(i, o.pageContentPx), {
+    clone: i,
+    layout: o,
+    options: a,
     cleanup: () => {
-      r.remove(), n();
+      i.remove(), n();
     }
   };
 }
-async function D(i, e, o = {}) {
-  const { clone: n, layout: r, options: t, cleanup: c } = B(e, o);
+async function Y(t, e, a = {}) {
+  const { clone: n, layout: i, options: o, cleanup: s } = J(e, a);
   try {
-    await new Promise((a) => {
-      i.html(n, {
-        callback: () => a(),
-        width: r.contentWidthMm,
-        windowWidth: r.renderedWidth,
+    await new Promise((r) => {
+      t.html(n, {
+        callback: () => r(),
+        width: i.contentWidthMm,
+        windowWidth: i.renderedWidth,
         margin: [
-          t.margin.top,
-          t.margin.right,
-          t.margin.bottom,
-          t.margin.left
+          o.margin.top,
+          o.margin.right,
+          o.margin.bottom,
+          o.margin.left
         ]
       });
     });
   } finally {
-    c();
+    s();
+  }
+  return a.marginContent && await z(t, a.marginContent, a), t;
+}
+function k(t, e) {
+  switch (t) {
+    case "top":
+      return { x: 0, y: 0, width: e.pageWidth, height: e.margin.top };
+    case "bottom":
+      return {
+        x: 0,
+        y: e.pageHeight - e.margin.bottom,
+        width: e.pageWidth,
+        height: e.margin.bottom
+      };
+    case "left":
+      return { x: 0, y: 0, width: e.margin.left, height: e.pageHeight };
+    case "right":
+      return {
+        x: e.pageWidth - e.margin.right,
+        y: 0,
+        width: e.margin.right,
+        height: e.pageHeight
+      };
+  }
+}
+async function L(t, e, a, n) {
+  const i = document.createElement("div");
+  Object.assign(i.style, {
+    position: "fixed",
+    left: "-99999px",
+    top: "0",
+    width: e + "mm",
+    height: a + "mm",
+    overflow: "hidden"
+  }), i.appendChild(t), document.body.appendChild(i);
+  try {
+    return await W(i, {
+      scale: n,
+      backgroundColor: null
+    });
+  } finally {
+    i.remove();
+  }
+}
+const D = ["top", "right", "bottom", "left"];
+async function F(t, e, a) {
+  const n = {};
+  for (const i of D) {
+    const o = t[i];
+    if (o && typeof o != "function") {
+      const s = k(i, e);
+      n[i] = await L(
+        o.cloneNode(!0),
+        s.width,
+        s.height,
+        a
+      );
+    }
   }
-  return i;
+  return n;
 }
-async function F(i, e = {}) {
-  const { imageFormat: o = "JPEG", imageQuality: n = 1, scale: r = 2 } = e, t = W(e), c = S(), a = A(i, t.pageWidth);
-  a.style.opacity = "1", a.style.left = "-99999px", E(a);
-  const h = M(a, t);
-  R(a, h.pageContentPx), N(a, h.pageContentPx), j(a, h.pageContentPx);
+function Q(t, e) {
+  return t == null ? e.margin : typeof t == "number" ? { top: t, right: t, bottom: t, left: t } : {
+    top: t.top ?? e.margin.top,
+    right: t.right ?? e.margin.right,
+    bottom: t.bottom ?? e.margin.bottom,
+    left: t.left ?? e.margin.left
+  };
+}
+function Z(t, e, a, n, i, o, s) {
+  const {
+    text: r,
+    color: l = "#000000",
+    fontSize: d = 2.5,
+    fontFamily: c = "Arial, sans-serif"
+  } = e, g = d * a, m = (e.gap ?? d * 0.5) * a;
+  t.save(), t.fillStyle = l, t.font = `${g}px ${c}`, t.textBaseline = "middle";
+  const h = t.measureText(r).width + m;
+  t.save(), t.beginPath(), t.rect(n, i - g, o, g * 2), t.clip();
+  for (let f = n; f < n + o; f += h)
+    t.fillText(r, f, i);
+  t.restore(), t.save(), t.beginPath(), t.rect(n, i + s - g, o, g * 2), t.clip();
+  for (let f = n; f < n + o; f += h)
+    t.fillText(r, f, i + s);
+  t.restore(), t.save(), t.translate(n, i + s), t.rotate(-Math.PI / 2), t.beginPath(), t.rect(0, -g, s, g * 2), t.clip();
+  for (let f = 0; f < s; f += h)
+    t.fillText(r, f, 0);
+  t.restore(), t.save(), t.translate(n + o, i), t.rotate(Math.PI / 2), t.beginPath(), t.rect(0, -g, s, g * 2), t.clip();
+  for (let f = 0; f < s; f += h)
+    t.fillText(r, f, 0);
+  t.restore(), t.restore();
+}
+function I(t, e) {
+  return Q(t.margin, e);
+}
+async function G(t, e, a, n, i, o, s, r) {
+  for (const l of D) {
+    const d = e[l];
+    if (!d) continue;
+    const c = k(l, n);
+    let g;
+    typeof d == "function" ? g = await L(
+      d(o, s),
+      c.width,
+      c.height,
+      r
+    ) : g = a[l], t.drawImage(
+      g,
+      0,
+      0,
+      g.width,
+      g.height,
+      Math.round(c.x * i),
+      Math.round(c.y * i),
+      Math.round(c.width * i),
+      Math.round(c.height * i)
+    );
+  }
+  if (e.contentBorder) {
+    const { color: l = "#000000", width: d = 0.3 } = e.contentBorder, c = I(e.contentBorder, n);
+    t.strokeStyle = l, t.lineWidth = d * i, t.strokeRect(
+      Math.round(c.left * i),
+      Math.round(c.top * i),
+      Math.round((n.pageWidth - c.left - c.right) * i),
+      Math.round((n.pageHeight - c.top - c.bottom) * i)
+    );
+  }
+  if (e.textBorder) {
+    const l = I(e.textBorder, n);
+    Z(
+      t,
+      e.textBorder,
+      i,
+      Math.round(l.left * i),
+      Math.round(l.top * i),
+      Math.round((n.pageWidth - l.left - l.right) * i),
+      Math.round((n.pageHeight - l.top - l.bottom) * i)
+    );
+  }
+}
+async function X(t, e = {}) {
+  const { imageFormat: a = "JPEG", imageQuality: n = 1, scale: i = 2 } = e, o = M(e), s = N(), r = B(t, o.pageWidth);
+  r.style.opacity = "1", r.style.left = "-99999px", E(r);
+  const l = x(r, o);
+  T(r, l.pageContentPx), R(r, l.pageContentPx), j(r, l.pageContentPx);
   try {
-    const d = await T(a, {
-      scale: r,
+    const d = await W(r, {
+      scale: i,
       backgroundColor: "#ffffff"
-    }), { jsPDF: l } = await import("jspdf"), g = t.pageWidth - t.margin.left - t.margin.right, m = t.pageHeight - t.margin.top - t.margin.bottom, s = d.width, f = m / g * s, P = Math.ceil(d.height / f), w = t.pageWidth > t.pageHeight ? "l" : "p", H = new l({
-      orientation: w,
+    }), { jsPDF: c } = await import("jspdf"), g = o.pageWidth - o.margin.left - o.margin.right, m = o.pageHeight - o.margin.top - o.margin.bottom, h = d.width, f = m / g * h, P = Math.ceil(d.height / f), v = o.pageWidth > o.pageHeight ? "l" : "p", C = new c({
+      orientation: v,
       unit: "mm",
-      format: [t.pageWidth, t.pageHeight]
+      format: [o.pageWidth, o.pageHeight]
     });
-    for (let u = 0; u < P; u++) {
-      const y = Math.min(
+    for (let y = 0; y < P; y++) {
+      const p = Math.min(
         f,
-        d.height - u * f
-      ), b = document.createElement("canvas");
-      b.width = s, b.height = y;
-      const p = b.getContext("2d");
-      if (!p) throw new Error("Could not get canvas context");
-      p.fillStyle = "#ffffff", p.fillRect(0, 0, s, y), p.drawImage(
+        d.height - y * f
+      ), w = document.createElement("canvas");
+      w.width = h, w.height = p;
+      const u = w.getContext("2d");
+      if (!u) throw new Error("Could not get canvas context");
+      u.fillStyle = "#ffffff", u.fillRect(0, 0, h, p), u.drawImage(
         d,
         0,
-        u * f,
-        s,
-        y,
+        y * f,
+        h,
+        p,
         0,
         0,
-        s,
-        y
+        h,
+        p
       );
-      const v = b.toDataURL(
-        `image/${o.toLowerCase()}`,
+      const A = w.toDataURL(
+        `image/${a.toLowerCase()}`,
         n
       );
-      u > 0 && H.addPage([t.pageWidth, t.pageHeight], w);
-      const x = y / s * g;
-      H.addImage(
-        v,
-        o,
-        t.margin.left,
-        t.margin.top,
+      y > 0 && C.addPage([o.pageWidth, o.pageHeight], v);
+      const b = p / h * g;
+      C.addImage(
+        A,
+        a,
+        o.margin.left,
+        o.margin.top,
         g,
-        x,
+        b,
         void 0,
         "FAST"
       );
     }
-    return H;
+    return e.marginContent && await z(C, e.marginContent, e), C;
   } finally {
-    a.remove(), c();
+    r.remove(), s();
   }
 }
-async function I(i, e = {}) {
-  const { imageFormat: o = "PNG", imageQuality: n = 1, scale: r = 2 } = e, t = W(e), c = S(), a = A(i, t.pageWidth);
-  a.style.opacity = "1", a.style.left = "-99999px", E(a);
-  const h = M(a, t);
-  R(a, h.pageContentPx), N(a, h.pageContentPx), j(a, h.pageContentPx);
+async function K(t, e = {}) {
+  const { imageFormat: a = "PNG", imageQuality: n = 1, scale: i = 2 } = e, o = M(e), s = N(), r = B(t, o.pageWidth);
+  r.style.opacity = "1", r.style.left = "-99999px", E(r);
+  const l = x(r, o);
+  T(r, l.pageContentPx), R(r, l.pageContentPx), j(r, l.pageContentPx);
   try {
-    const d = await T(a, {
-      scale: r,
+    const d = await W(r, {
+      scale: i,
       backgroundColor: "#ffffff"
-    }), l = t.pageWidth - t.margin.left - t.margin.right, g = t.pageHeight - t.margin.top - t.margin.bottom, m = d.width, s = g / l * m, f = m / l, P = Math.round(t.pageWidth * f), w = Math.round(t.pageHeight * f), H = Math.round(t.margin.top * f), u = Math.round(t.margin.left * f), y = Math.ceil(d.height / s), b = [];
-    for (let p = 0; p < y; p++) {
-      const v = Math.min(
-        s,
-        d.height - p * s
-      ), x = document.createElement("canvas");
-      x.width = P, x.height = w;
-      const C = x.getContext("2d");
-      if (!C) throw new Error("Could not get canvas context");
-      C.fillStyle = "#ffffff", C.fillRect(0, 0, P, w), C.drawImage(
+    }), c = o.pageWidth - o.margin.left - o.margin.right, g = o.pageHeight - o.margin.top - o.margin.bottom, m = d.width, h = g / c * m, f = m / c, P = Math.round(o.pageWidth * f), v = Math.round(o.pageHeight * f), C = Math.round(o.margin.top * f), y = Math.round(o.margin.left * f), p = Math.ceil(d.height / h), w = [], { marginContent: u } = e, A = u ? await F(u, o, i) : {};
+    for (let b = 0; b < p; b++) {
+      const O = Math.min(
+        h,
+        d.height - b * h
+      ), S = document.createElement("canvas");
+      S.width = P, S.height = v;
+      const H = S.getContext("2d");
+      if (!H) throw new Error("Could not get canvas context");
+      H.fillStyle = "#ffffff", H.fillRect(0, 0, P, v), H.drawImage(
         d,
         0,
-        p * s,
+        b * h,
         m,
-        v,
-        u,
-        H,
+        O,
+        y,
+        C,
         m,
-        v
-      ), b.push(
-        x.toDataURL(
-          `image/${o.toLowerCase()}`,
+        O
+      ), u && await G(
+        H,
+        u,
+        A,
+        o,
+        f,
+        b + 1,
+        p,
+        i
+      ), w.push(
+        S.toDataURL(
+          `image/${a.toLowerCase()}`,
           n
         )
       );
     }
-    return b;
+    return w;
   } finally {
-    a.remove(), c();
+    r.remove(), s();
   }
 }
-async function q(i, e, o = {}) {
-  const n = W(o), r = await I(i, o);
+async function tt(t, e, a = {}) {
+  const n = M(a), i = await K(t, a);
   e.innerHTML = "", Object.assign(e.style, {
+    direction: "ltr",
     width: "fit-content",
     height: n.pageHeight + "mm",
     maxHeight: "100vh",
     overflowY: "auto",
     background: "#e0e0e0"
   });
-  for (let t = 0; t < r.length; t++) {
-    const c = document.createElement("img");
-    c.src = r[t], c.alt = `Page ${t + 1}`, Object.assign(c.style, {
+  for (let o = 0; o < i.length; o++) {
+    const s = document.createElement("img");
+    s.src = i[o], s.alt = `Page ${o + 1}`, Object.assign(s.style, {
       width: n.pageWidth + "mm",
       maxWidth: "100%",
       height: "auto",
@@ -277,21 +482,49 @@ async function q(i, e, o = {}) {
       border: "1px solid #bbb",
       boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
       marginBottom: "16px"
-    }), e.appendChild(c);
+    }), e.appendChild(s);
+  }
+}
+async function z(t, e, a = {}) {
+  const n = M(a), i = t.getNumberOfPages(), o = 2, s = o * (96 / 25.4), r = Math.round(n.pageWidth * s), l = Math.round(n.pageHeight * s), d = await F(e, n, o);
+  for (let c = 1; c <= i; c++) {
+    t.setPage(c);
+    const g = document.createElement("canvas");
+    g.width = r, g.height = l;
+    const m = g.getContext("2d");
+    m && (await G(
+      m,
+      e,
+      d,
+      n,
+      s,
+      c,
+      i,
+      o
+    ), t.addImage(
+      g.toDataURL("image/png"),
+      "PNG",
+      0,
+      0,
+      n.pageWidth,
+      n.pageHeight
+    ));
   }
+  return t;
 }
 export {
-  L as PAGE_MARGINS,
-  k as PAGE_SIZES,
-  M as computeLayout,
-  A as createPrintClone,
+  $ as PAGE_MARGINS,
+  q as PAGE_SIZES,
+  z as addMarginContent,
+  x as computeLayout,
+  B as createPrintClone,
   j as insertPageBreakSpacers,
   E as normalizeTableAttributes,
-  B as prepare,
-  q as previewPageImages,
-  D as renderHTML,
-  F as renderImagePDF,
-  I as renderPageImages,
-  R as splitOversizedTables,
-  N as splitOversizedText
+  J as prepare,
+  tt as previewPageImages,
+  Y as renderHTML,
+  X as renderImagePDF,
+  K as renderPageImages,
+  T as splitOversizedTables,
+  R as splitOversizedText
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspdf-utils",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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",