jspdf-utils 0.1.3 → 0.1.4

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

@@ -38,18 +38,13 @@ export interface PrepareResult {
 /** Compute derived layout values from options. */
 declare function computeLayout(container: HTMLElement, opts: PageOptions): Layout;
 /**
- * Clone an element and position it off-screen at print width for measurement.
- */
-declare function createPrintClone(source: HTMLElement, pageWidth?: number): HTMLElement;
-/**
- * Inline computed styles from `source` onto the matching elements in `clone`.
+ * Clone an element into a hidden iframe so that the page's CSS frameworks
+ * (Tailwind, Bootstrap, etc.) cannot interfere with PDF rendering.
  *
- * jsPDF's doc.html() has its own CSS engine that can misinterpret styles
- * injected by frameworks like Tailwind. By "baking" the browser's computed
- * values as inline styles on the clone, we bypass jsPDF's CSS processing
- * entirely and get consistent output across all environments.
+ * Only @font-face rules are copied into the iframe so custom fonts still work.
+ * The returned element's `.remove()` method cleans up the iframe automatically.
  */
-declare function inlineComputedStyles(source: HTMLElement, clone: HTMLElement): void;
+declare function createPrintClone(source: HTMLElement, pageWidth?: number): HTMLElement;
 /**
  * Convert HTML table attributes (cellpadding, cellspacing, border) to
  * inline CSS so doc.html()'s renderer picks them up.
@@ -90,4 +85,4 @@ 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, inlineComputedStyles, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, };
+export { PAGE_SIZES, PAGE_MARGINS, computeLayout, createPrintClone, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, };

package/dist/html-to-pdf.js

@@ -1,5 +1,5 @@
-import N from "html2canvas";
-const T = {
+import D from "html2canvas";
+const N = {
   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]
-}, k = {
+}, R = {
   a0: 40,
   a1: 35,
   a2: 30,
@@ -22,251 +22,228 @@ const T = {
   legal: 25.4,
   tabloid: 25
 };
-function A(i = {}) {
-  const o = i.format ?? "a4", [n, t] = T[o], r = i.pageWidth ?? n, e = i.pageHeight ?? t, a = k[o], l = {
+function x(r = {}) {
+  const n = r.format ?? "a4", [i, e] = N[n], o = r.pageWidth ?? i, t = r.pageHeight ?? e, a = R[n], c = {
     top: a,
     right: a,
     bottom: a,
     left: a
   };
   return {
-    unit: i.unit ?? "mm",
-    format: o,
-    pageWidth: r,
-    pageHeight: e,
-    margin: { ...l, ...i.margin }
+    unit: r.unit ?? "mm",
+    format: n,
+    pageWidth: o,
+    pageHeight: t,
+    margin: { ...c, ...r.margin }
   };
 }
-function x(i, o) {
-  const n = i.offsetWidth, t = o.pageWidth - o.margin.left - o.margin.right, r = t / n, a = (o.pageHeight - o.margin.top - o.margin.bottom) / r;
-  return { renderedWidth: n, scale: r, contentWidthMm: t, pageContentPx: a };
+function C(r, n) {
+  const i = r.offsetWidth, e = n.pageWidth - n.margin.left - n.margin.right, o = e / i, a = (n.pageHeight - n.margin.top - n.margin.bottom) / o;
+  return { renderedWidth: i, scale: o, contentWidthMm: e, pageContentPx: a };
 }
-function P(i, o = 210) {
-  const n = i.cloneNode(!0);
-  return Object.assign(n.style, {
+function v(r, n = 210) {
+  const i = document.createElement("iframe");
+  Object.assign(i.style, {
     position: "fixed",
     top: "0",
-    left: "0",
-    boxSizing: "border-box",
-    width: o + "mm",
+    left: "-99999px",
+    width: n + "mm",
+    height: "99999px",
+    border: "none",
     opacity: "0.000001",
     pointerEvents: "none"
-  }), document.body.appendChild(n), n;
-}
-function q(i, o) {
-  const n = [
-    "display",
-    "vertical-align",
-    "text-align",
-    "line-height",
-    "box-sizing",
-    "padding-top",
-    "padding-right",
-    "padding-bottom",
-    "padding-left",
-    "border-top-width",
-    "border-right-width",
-    "border-bottom-width",
-    "border-left-width",
-    "border-top-style",
-    "border-right-style",
-    "border-bottom-style",
-    "border-left-style",
-    "border-top-color",
-    "border-right-color",
-    "border-bottom-color",
-    "border-left-color",
-    "border-collapse",
-    "border-spacing",
-    "font-family",
-    "font-size",
-    "font-weight",
-    "font-style",
-    "color",
-    "background-color",
-    "direction",
-    "unicode-bidi",
-    "table-layout",
-    "white-space"
-  ], t = (l, s) => {
-    const h = getComputedStyle(l);
-    for (const c of n)
-      s.style.setProperty(c, h.getPropertyValue(c));
-  };
-  t(i, o);
-  const r = i.querySelectorAll("*"), e = o.querySelectorAll("*"), a = Math.min(r.length, e.length);
-  for (let l = 0; l < a; l++)
-    t(r[l], e[l]);
+  }), document.body.appendChild(i);
+  const e = i.contentDocument;
+  if (!e) throw new Error("Could not access iframe document");
+  const o = e.createElement("base");
+  o.href = document.baseURI, e.head.appendChild(o);
+  const t = [];
+  for (const c of document.styleSheets)
+    try {
+      for (const l of c.cssRules)
+        l instanceof CSSFontFaceRule && t.push(l.cssText);
+    } catch {
+    }
+  if (t.length > 0) {
+    const c = e.createElement("style");
+    c.textContent = t.join(`
+`), e.head.appendChild(c);
+  }
+  const a = r.cloneNode(!0);
+  return Object.assign(a.style, {
+    boxSizing: "border-box",
+    width: n + "mm"
+  }), e.body.style.margin = "0", e.body.appendChild(a), a.remove = () => i.remove(), a;
 }
-function v(i) {
-  for (const o of i.querySelectorAll("table")) {
-    const n = o.getAttribute("cellpadding");
-    if (n) {
-      for (const t of o.querySelectorAll("th, td"))
-        t.style.padding || (t.style.padding = n + "px");
-      o.removeAttribute("cellpadding");
+function A(r) {
+  for (const n of r.querySelectorAll("table")) {
+    const i = n.getAttribute("cellpadding");
+    if (i) {
+      for (const e of n.querySelectorAll("th, td"))
+        e.style.padding || (e.style.padding = i + "px");
+      n.removeAttribute("cellpadding");
     }
   }
 }
-function C(i, o) {
-  for (const n of Array.from(
-    i.querySelectorAll(":scope > table")
+function E(r, n) {
+  for (const i of Array.from(
+    r.querySelectorAll(":scope > table")
   )) {
-    if (n.offsetHeight <= o) continue;
-    const t = Array.from(n.rows);
-    if (t.length === 0) continue;
-    const r = t[0].querySelector("th") !== null, e = r ? t[0] : null, a = r ? t.slice(1) : t, l = e ? e.offsetHeight : 0, s = o - l - 2, h = [];
-    let c = [], f = 0;
-    for (const d of a) {
-      const g = d.offsetHeight;
-      f + g > s && c.length > 0 && (h.push(c), c = [], f = 0), c.push(d), f += g;
+    if (i.offsetHeight <= n) continue;
+    const e = Array.from(i.rows);
+    if (e.length === 0) continue;
+    const o = e[0].querySelector("th") !== null, t = o ? e[0] : null, a = o ? e.slice(1) : e, c = t ? t.offsetHeight : 0, l = n - c - 2, d = [];
+    let f = [], h = 0;
+    for (const s of a) {
+      const g = s.offsetHeight;
+      h + g > l && f.length > 0 && (d.push(f), f = [], h = 0), f.push(s), h += g;
     }
-    c.length > 0 && h.push(c);
-    for (const d of h) {
-      const g = n.cloneNode(!1);
-      e && g.appendChild(e.cloneNode(!0));
-      for (const m of d) g.appendChild(m.cloneNode(!0));
-      n.parentNode.insertBefore(g, n);
+    f.length > 0 && d.push(f);
+    for (const s of d) {
+      const g = i.cloneNode(!1);
+      t && g.appendChild(t.cloneNode(!0));
+      for (const m of s) g.appendChild(m.cloneNode(!0));
+      i.parentNode.insertBefore(g, i);
     }
-    n.remove();
+    i.remove();
   }
 }
-function S(i, o) {
-  for (const n of Array.from(i.querySelectorAll(":scope > *"))) {
-    const t = n;
-    if (t.offsetHeight <= o || t.tagName === "TABLE")
+function P(r, n) {
+  const i = r.ownerDocument;
+  for (const e of Array.from(r.querySelectorAll(":scope > *"))) {
+    const o = e;
+    if (o.offsetHeight <= n || o.tagName === "TABLE")
       continue;
-    const r = t.tagName, e = t.getAttribute("style") || "", a = getComputedStyle(t).width, l = (t.textContent || "").split(/\s+/).filter(Boolean), s = document.createElement(r);
-    s.setAttribute("style", e), Object.assign(s.style, {
+    const t = o.tagName, a = o.getAttribute("style") || "", c = i.defaultView.getComputedStyle(o).width, l = (o.textContent || "").split(/\s+/).filter(Boolean), d = i.createElement(t);
+    d.setAttribute("style", a), Object.assign(d.style, {
       position: "absolute",
       visibility: "hidden",
-      width: a
-    }), i.appendChild(s);
-    const h = [];
-    let c = 0;
-    for (; c < l.length; ) {
-      let f = c + 1, d = l.length;
-      for (; f < d; ) {
-        const m = Math.ceil((f + d) / 2);
-        s.textContent = l.slice(c, m).join(" "), s.offsetHeight <= o ? f = m : d = m - 1;
+      width: c
+    }), r.appendChild(d);
+    const f = [];
+    let h = 0;
+    for (; h < l.length; ) {
+      let s = h + 1, g = l.length;
+      for (; s < g; ) {
+        const u = Math.ceil((s + g) / 2);
+        d.textContent = l.slice(h, u).join(" "), d.offsetHeight <= n ? s = u : g = u - 1;
       }
-      const g = document.createElement(r);
-      g.setAttribute("style", e), g.textContent = l.slice(c, f).join(" "), h.push(g), c = f;
+      const m = i.createElement(t);
+      m.setAttribute("style", a), m.textContent = l.slice(h, s).join(" "), f.push(m), h = s;
     }
-    s.remove();
-    for (const f of h)
-      t.parentNode.insertBefore(f, t);
-    t.remove();
+    d.remove();
+    for (const s of f)
+      o.parentNode.insertBefore(s, o);
+    o.remove();
   }
 }
-function W(i, o) {
-  const n = Array.from(i.children);
-  for (const t of n) {
-    const r = t.offsetTop, e = r + t.offsetHeight, a = (Math.floor(r / o) + 1) * o;
-    if (e > a && t.offsetHeight <= o) {
-      const l = document.createElement("div");
-      l.style.height = a - r + 1 + "px", t.parentNode.insertBefore(l, t);
+function W(r, n) {
+  const i = r.ownerDocument, e = Array.from(r.children);
+  for (const o of e) {
+    const t = o.offsetTop, a = t + o.offsetHeight, c = (Math.floor(t / n) + 1) * n;
+    if (a > c && o.offsetHeight <= n) {
+      const l = i.createElement("div");
+      l.style.height = c - t + 1 + "px", o.parentNode.insertBefore(l, o);
     }
   }
 }
-function B(i, o = {}) {
-  const n = A(o), t = P(i, n.pageWidth);
-  q(i, t), v(t);
-  const r = x(t, n);
-  return C(t, r.pageContentPx), S(t, r.pageContentPx), W(t, r.pageContentPx), {
-    clone: t,
-    layout: r,
-    options: n,
-    cleanup: () => t.remove()
+function T(r, n = {}) {
+  const i = x(n), e = v(r, i.pageWidth);
+  A(e);
+  const o = C(e, i);
+  return E(e, o.pageContentPx), P(e, o.pageContentPx), W(e, o.pageContentPx), {
+    clone: e,
+    layout: o,
+    options: i,
+    cleanup: () => e.remove()
   };
 }
-async function R(i, o, n = {}) {
-  const { clone: t, layout: r, options: e, cleanup: a } = B(o, n);
+async function F(r, n, i = {}) {
+  const { clone: e, layout: o, options: t, cleanup: a } = T(n, i);
   try {
-    await new Promise((l) => {
-      i.html(t, {
-        callback: () => l(),
-        width: r.contentWidthMm,
-        windowWidth: r.renderedWidth,
+    await new Promise((c) => {
+      r.html(e, {
+        callback: () => c(),
+        width: o.contentWidthMm,
+        windowWidth: o.renderedWidth,
         margin: [
-          e.margin.top,
-          e.margin.right,
-          e.margin.bottom,
-          e.margin.left
+          t.margin.top,
+          t.margin.right,
+          t.margin.bottom,
+          t.margin.left
         ]
       });
     });
   } finally {
     a();
   }
-  return i;
+  return r;
 }
-async function j(i, o = {}) {
-  const { imageFormat: n = "JPEG", imageQuality: t = 1, scale: r = 2 } = o, e = A(o), a = P(i, e.pageWidth);
-  a.style.opacity = "1", a.style.left = "-99999px", v(a);
-  const l = x(a, e);
-  C(a, l.pageContentPx), S(a, l.pageContentPx), W(a, l.pageContentPx);
+async function B(r, n = {}) {
+  const { imageFormat: i = "JPEG", imageQuality: e = 1, scale: o = 2 } = n, t = x(n), a = v(r, t.pageWidth);
+  A(a);
+  const c = C(a, t);
+  E(a, c.pageContentPx), P(a, c.pageContentPx), W(a, c.pageContentPx);
   try {
-    const s = await N(a, {
-      scale: r,
+    const l = await D(a, {
+      scale: o,
       backgroundColor: "#ffffff"
-    }), { jsPDF: h } = await import("jspdf"), c = e.pageWidth - e.margin.left - e.margin.right, f = e.pageHeight - e.margin.top - e.margin.bottom, d = s.width, g = f / c * d, m = Math.ceil(s.height / g), H = e.pageWidth > e.pageHeight ? "l" : "p", w = new h({
-      orientation: H,
+    }), { jsPDF: d } = await import("jspdf"), f = t.pageWidth - t.margin.left - t.margin.right, h = t.pageHeight - t.margin.top - t.margin.bottom, s = l.width, g = h / f * s, m = Math.ceil(l.height / g), u = t.pageWidth > t.pageHeight ? "l" : "p", H = new d({
+      orientation: u,
       unit: "mm",
-      format: [e.pageWidth, e.pageHeight]
+      format: [t.pageWidth, t.pageHeight]
     });
     for (let p = 0; p < m; p++) {
-      const u = Math.min(
+      const y = Math.min(
         g,
-        s.height - p * g
+        l.height - p * g
       ), b = document.createElement("canvas");
-      b.width = d, b.height = u;
-      const y = b.getContext("2d");
-      if (!y) throw new Error("Could not get canvas context");
-      y.fillStyle = "#ffffff", y.fillRect(0, 0, d, u), y.drawImage(
-        s,
+      b.width = s, b.height = y;
+      const w = b.getContext("2d");
+      if (!w) throw new Error("Could not get canvas context");
+      w.fillStyle = "#ffffff", w.fillRect(0, 0, s, y), w.drawImage(
+        l,
         0,
         p * g,
-        d,
-        u,
+        s,
+        y,
         0,
         0,
-        d,
-        u
+        s,
+        y
       );
-      const M = b.toDataURL(
-        `image/${n.toLowerCase()}`,
-        t
+      const S = b.toDataURL(
+        `image/${i.toLowerCase()}`,
+        e
       );
-      p > 0 && w.addPage([e.pageWidth, e.pageHeight], H);
-      const E = u / d * c;
-      w.addImage(
+      p > 0 && H.addPage([t.pageWidth, t.pageHeight], u);
+      const M = y / s * f;
+      H.addImage(
+        S,
+        i,
+        t.margin.left,
+        t.margin.top,
+        f,
         M,
-        n,
-        e.margin.left,
-        e.margin.top,
-        c,
-        E,
         void 0,
         "FAST"
       );
     }
-    return w;
+    return H;
   } finally {
     a.remove();
   }
 }
 export {
-  k as PAGE_MARGINS,
-  T as PAGE_SIZES,
-  x as computeLayout,
-  P as createPrintClone,
-  q as inlineComputedStyles,
+  R as PAGE_MARGINS,
+  N as PAGE_SIZES,
+  C as computeLayout,
+  v as createPrintClone,
   W as insertPageBreakSpacers,
-  v as normalizeTableAttributes,
-  B as prepare,
-  R as renderHTML,
-  j as renderImagePDF,
-  C as splitOversizedTables,
-  S as splitOversizedText
+  A as normalizeTableAttributes,
+  T as prepare,
+  F as renderHTML,
+  B as renderImagePDF,
+  E as splitOversizedTables,
+  P as splitOversizedText
 };

package/package.json

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