jspdf-utils 0.1.6 → 0.1.7

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

@@ -81,4 +81,15 @@ export interface ImagePDFOptions {
  * screenshot — no selectable or extractable text in the output.
  */
 declare function renderImagePDF(source: HTMLElement, opts?: Partial<PageOptions> & ImagePDFOptions): Promise<jsPDF>;
-export { PAGE_SIZES, PAGE_MARGINS, computeLayout, createPrintClone, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, };
+/**
+ * Render an HTML element to an array of page images (data URLs).
+ * Each image represents a full page with margins, matching the
+ * visual output of renderImagePDF.
+ */
+declare function renderPageImages(source: HTMLElement, opts?: Partial<PageOptions> & ImagePDFOptions): Promise<string[]>;
+/**
+ * Render an HTML element as page images and inject them into a scrollable
+ * 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, };

package/dist/html-to-pdf.js

@@ -1,5 +1,5 @@
-import j from "html2canvas";
-const T = {
+import T from "html2canvas";
+const k = {
   a0: [841, 1189],
   a1: [594, 841],
   a2: [420, 594],
@@ -10,7 +10,7 @@ const T = {
   letter: [215.9, 279.4],
   legal: [215.9, 355.6],
   tabloid: [279.4, 431.8]
-}, B = {
+}, L = {
   a0: 40,
   a1: 35,
   a2: 30,
@@ -22,133 +22,133 @@ const T = {
   legal: 25.4,
   tabloid: 25
 };
-function v(i = {}) {
-  const n = i.format ?? "a4", [o, e] = T[n], a = i.pageWidth ?? o, t = i.pageHeight ?? e, s = B[n], r = {
-    top: s,
-    right: s,
-    bottom: s,
-    left: s
+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
   };
   return {
     unit: i.unit ?? "mm",
-    format: n,
-    pageWidth: a,
+    format: e,
+    pageWidth: r,
     pageHeight: t,
-    margin: { ...r, ...i.margin }
+    margin: { ...a, ...i.margin }
   };
 }
-function x(i, n) {
-  const o = i.offsetWidth, e = n.pageWidth - n.margin.left - n.margin.right, a = e / o, s = (n.pageHeight - n.margin.top - n.margin.bottom) / a;
-  return { renderedWidth: o, scale: a, contentWidthMm: e, pageContentPx: s };
+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 A(i, n = 210) {
+function A(i, e = 210) {
   const o = i.cloneNode(!0);
   return Object.assign(o.style, {
     position: "fixed",
     top: "0",
     left: "0",
     boxSizing: "border-box",
-    width: n + "mm",
+    width: e + "mm",
     opacity: "0.000001",
     pointerEvents: "none"
   }), document.body.appendChild(o), o;
 }
-function C() {
+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 W(i) {
-  for (const n of i.querySelectorAll("table")) {
-    const o = n.getAttribute("cellpadding");
+function E(i) {
+  for (const e of i.querySelectorAll("table")) {
+    const o = e.getAttribute("cellpadding");
     if (o) {
-      for (const e of n.querySelectorAll("th, td"))
-        e.style.padding || (e.style.padding = o + "px");
-      n.removeAttribute("cellpadding");
+      for (const n of e.querySelectorAll("th, td"))
+        n.style.padding || (n.style.padding = o + "px");
+      e.removeAttribute("cellpadding");
     }
   }
 }
-function P(i, n) {
+function R(i, e) {
   for (const o of Array.from(
     i.querySelectorAll(":scope > table")
   )) {
-    if (o.offsetHeight <= n) continue;
-    const e = Array.from(o.rows);
-    if (e.length === 0) continue;
-    const a = e[0].querySelector("th") !== null, t = a ? e[0] : null, s = a ? e.slice(1) : e, r = t ? t.offsetHeight : 0, d = n - r - 2, f = [];
-    let g = [], l = 0;
-    for (const h of s) {
-      const c = h.offsetHeight;
-      l + c > d && g.length > 0 && (f.push(g), g = [], l = 0), g.push(h), l += c;
+    if (o.offsetHeight <= e) continue;
+    const n = Array.from(o.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;
     }
-    g.length > 0 && f.push(g);
-    for (const h of f) {
-      const c = o.cloneNode(!1);
-      t && c.appendChild(t.cloneNode(!0));
-      for (const m of h) c.appendChild(m.cloneNode(!0));
-      o.parentNode.insertBefore(c, o);
+    l.length > 0 && d.push(l);
+    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);
     }
     o.remove();
   }
 }
-function S(i, n) {
+function N(i, e) {
   for (const o of Array.from(i.querySelectorAll(":scope > *"))) {
-    const e = o;
-    if (e.offsetHeight <= n || e.tagName === "TABLE")
+    const n = o;
+    if (n.offsetHeight <= e || n.tagName === "TABLE")
       continue;
-    const a = e.tagName, t = e.getAttribute("style") || "", s = getComputedStyle(e).width, r = (e.textContent || "").split(/\s+/).filter(Boolean), d = document.createElement(a);
-    d.setAttribute("style", t), Object.assign(d.style, {
+    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, {
       position: "absolute",
       visibility: "hidden",
-      width: s
-    }), i.appendChild(d);
-    const f = [];
-    let g = 0;
-    for (; g < r.length; ) {
-      let l = g + 1, h = r.length;
-      for (; l < h; ) {
-        const m = Math.ceil((l + h) / 2);
-        d.textContent = r.slice(g, m).join(" "), d.offsetHeight <= n ? l = m : h = m - 1;
+      width: c
+    }), i.appendChild(h);
+    const d = [];
+    let l = 0;
+    for (; l < a.length; ) {
+      let g = l + 1, m = a.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;
       }
-      const c = document.createElement(a);
-      c.setAttribute("style", t), c.textContent = r.slice(g, l).join(" "), f.push(c), g = l;
+      const s = document.createElement(r);
+      s.setAttribute("style", t), s.textContent = a.slice(l, g).join(" "), d.push(s), l = g;
     }
-    d.remove();
-    for (const l of f)
-      e.parentNode.insertBefore(l, e);
-    e.remove();
+    h.remove();
+    for (const g of d)
+      n.parentNode.insertBefore(g, n);
+    n.remove();
   }
 }
-function M(i, n) {
+function j(i, e) {
   const o = Array.from(i.children);
-  for (const e of o) {
-    const a = e.offsetTop, t = a + e.offsetHeight, s = (Math.floor(a / n) + 1) * n;
-    if (t > s && e.offsetHeight <= n) {
-      const r = document.createElement("div");
-      r.style.height = s - a + 1 + "px", e.parentNode.insertBefore(r, e);
+  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 k(i, n = {}) {
-  const o = v(n), e = C(), a = A(i, o.pageWidth);
-  W(a);
-  const t = x(a, o);
-  return P(a, t.pageContentPx), S(a, t.pageContentPx), M(a, t.pageContentPx), {
-    clone: 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,
     cleanup: () => {
-      a.remove(), e();
+      r.remove(), n();
     }
   };
 }
-async function F(i, n, o = {}) {
-  const { clone: e, layout: a, options: t, cleanup: s } = k(n, o);
+async function D(i, e, o = {}) {
+  const { clone: n, layout: r, options: t, cleanup: c } = B(e, o);
   try {
-    await new Promise((r) => {
-      i.html(e, {
-        callback: () => r(),
-        width: a.contentWidthMm,
-        windowWidth: a.renderedWidth,
+    await new Promise((a) => {
+      i.html(n, {
+        callback: () => a(),
+        width: r.contentWidthMm,
+        windowWidth: r.renderedWidth,
         margin: [
           t.margin.top,
           t.margin.right,
@@ -158,75 +158,140 @@ async function F(i, n, o = {}) {
       });
     });
   } finally {
-    s();
+    c();
   }
   return i;
 }
-async function O(i, n = {}) {
-  const { imageFormat: o = "JPEG", imageQuality: e = 1, scale: a = 2 } = n, t = v(n), s = C(), r = A(i, t.pageWidth);
-  r.style.opacity = "1", r.style.left = "-99999px", W(r);
-  const d = x(r, t);
-  P(r, d.pageContentPx), S(r, d.pageContentPx), M(r, d.pageContentPx);
+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);
   try {
-    const f = await j(r, {
-      scale: a,
+    const d = await T(a, {
+      scale: r,
       backgroundColor: "#ffffff"
-    }), { jsPDF: g } = await import("jspdf"), l = t.pageWidth - t.margin.left - t.margin.right, h = t.pageHeight - t.margin.top - t.margin.bottom, c = f.width, m = h / l * c, E = Math.ceil(f.height / m), H = t.pageWidth > t.pageHeight ? "l" : "p", w = new g({
-      orientation: H,
+    }), { 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,
       unit: "mm",
       format: [t.pageWidth, t.pageHeight]
     });
-    for (let u = 0; u < E; u++) {
-      const p = Math.min(
-        m,
-        f.height - u * m
-      ), y = document.createElement("canvas");
-      y.width = c, y.height = p;
-      const b = y.getContext("2d");
-      if (!b) throw new Error("Could not get canvas context");
-      b.fillStyle = "#ffffff", b.fillRect(0, 0, c, p), b.drawImage(
+    for (let u = 0; u < P; u++) {
+      const y = 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,
         0,
-        u * m,
-        c,
-        p,
+        u * f,
+        s,
+        y,
         0,
         0,
-        c,
-        p
+        s,
+        y
       );
-      const N = y.toDataURL(
+      const v = b.toDataURL(
         `image/${o.toLowerCase()}`,
-        e
+        n
       );
-      u > 0 && w.addPage([t.pageWidth, t.pageHeight], H);
-      const R = p / c * l;
-      w.addImage(
-        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,
-        l,
-        R,
+        g,
+        x,
         void 0,
         "FAST"
       );
     }
-    return w;
+    return H;
   } finally {
-    r.remove(), s();
+    a.remove(), c();
+  }
+}
+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);
+  try {
+    const d = await T(a, {
+      scale: r,
+      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(
+        d,
+        0,
+        p * s,
+        m,
+        v,
+        u,
+        H,
+        m,
+        v
+      ), b.push(
+        x.toDataURL(
+          `image/${o.toLowerCase()}`,
+          n
+        )
+      );
+    }
+    return b;
+  } finally {
+    a.remove(), c();
+  }
+}
+async function q(i, e, o = {}) {
+  const n = W(o), r = await I(i, o);
+  e.innerHTML = "", Object.assign(e.style, {
+    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, {
+      width: n.pageWidth + "mm",
+      maxWidth: "100%",
+      height: "auto",
+      boxSizing: "border-box",
+      display: "block",
+      border: "1px solid #bbb",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+      marginBottom: "16px"
+    }), e.appendChild(c);
   }
 }
 export {
-  B as PAGE_MARGINS,
-  T as PAGE_SIZES,
-  x as computeLayout,
+  L as PAGE_MARGINS,
+  k as PAGE_SIZES,
+  M as computeLayout,
   A as createPrintClone,
-  M as insertPageBreakSpacers,
-  W as normalizeTableAttributes,
-  k as prepare,
-  F as renderHTML,
-  O as renderImagePDF,
-  P as splitOversizedTables,
-  S as splitOversizedText
+  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
 };

package/package.json

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