jspdf-utils 0.1.2 → 0.1.3

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

@@ -42,16 +42,14 @@ declare function computeLayout(container: HTMLElement, opts: PageOptions): Layou
  */
 declare function createPrintClone(source: HTMLElement, pageWidth?: number): HTMLElement;
 /**
- * Reset framework/global CSS on table elements inside the clone so that
- * jsPDF's doc.html() renderer produces consistent output regardless of
- * the host page's CSS environment (e.g. Tailwind preflight, CSS resets).
+ * Inline computed styles from `source` onto the matching elements in `clone`.
  *
- * Uses `all: revert` to roll back author-stylesheet properties to
- * user-agent defaults while preserving inline styles set by the caller.
- *
- * Returns a cleanup function that removes the injected style element.
+ * 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.
  */
-declare function resetFrameworkCSS(clone: HTMLElement): () => void;
+declare function inlineComputedStyles(source: HTMLElement, clone: HTMLElement): void;
 /**
  * Convert HTML table attributes (cellpadding, cellspacing, border) to
  * inline CSS so doc.html()'s renderer picks them up.
@@ -92,4 +90,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, resetFrameworkCSS, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, };
+export { PAGE_SIZES, PAGE_MARGINS, computeLayout, createPrintClone, inlineComputedStyles, normalizeTableAttributes, splitOversizedTables, splitOversizedText, insertPageBreakSpacers, prepare, renderHTML, renderImagePDF, };

package/dist/html-to-pdf.js

@@ -1,5 +1,5 @@
-import j from "html2canvas";
-const N = {
+import N from "html2canvas";
+const T = {
   a0: [841, 1189],
   a1: [594, 841],
   a2: [420, 594],
@@ -10,7 +10,7 @@ const N = {
   letter: [215.9, 279.4],
   legal: [215.9, 355.6],
   tabloid: [279.4, 431.8]
-}, T = {
+}, k = {
   a0: 40,
   a1: 35,
   a2: 30,
@@ -22,8 +22,8 @@ const N = {
   legal: 25.4,
   tabloid: 25
 };
-function C(i = {}) {
-  const o = i.format ?? "a4", [n, t] = N[o], r = i.pageWidth ?? n, e = i.pageHeight ?? t, a = T[o], c = {
+function A(i = {}) {
+  const o = i.format ?? "a4", [n, t] = T[o], r = i.pageWidth ?? n, e = i.pageHeight ?? t, a = k[o], l = {
     top: a,
     right: a,
     bottom: a,
@@ -34,14 +34,14 @@ function C(i = {}) {
     format: o,
     pageWidth: r,
     pageHeight: e,
-    margin: { ...c, ...i.margin }
+    margin: { ...l, ...i.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 v(i, o = 210) {
+function P(i, o = 210) {
   const n = i.cloneNode(!0);
   return Object.assign(n.style, {
     position: "fixed",
@@ -53,13 +53,52 @@ function v(i, o = 210) {
     pointerEvents: "none"
   }), document.body.appendChild(n), n;
 }
-function k(i) {
-  const o = "__jspdf_" + Math.random().toString(36).slice(2, 8);
-  i.dataset.jspdfClone = o;
-  const n = `[data-jspdf-clone="${o}"]`, r = ["table", "thead", "tbody", "tfoot", "tr", "td", "th"].map((a) => `${n} ${a}`).join(",") + "{all:revert}", e = document.createElement("style");
-  return e.textContent = r, document.head.appendChild(e), () => e.remove();
+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]);
 }
-function A(i) {
+function v(i) {
   for (const o of i.querySelectorAll("table")) {
     const n = o.getAttribute("cellpadding");
     if (n) {
@@ -69,86 +108,84 @@ function A(i) {
     }
   }
 }
-function S(i, o) {
+function C(i, o) {
   for (const n of Array.from(
     i.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, c = e ? e.offsetHeight : 0, d = o - c - 2, h = [];
-    let s = [], f = 0;
-    for (const l of a) {
-      const g = l.offsetHeight;
-      f + g > d && s.length > 0 && (h.push(s), s = [], f = 0), s.push(l), f += g;
+    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;
     }
-    s.length > 0 && h.push(s);
-    for (const l of h) {
+    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 l) g.appendChild(m.cloneNode(!0));
+      for (const m of d) g.appendChild(m.cloneNode(!0));
       n.parentNode.insertBefore(g, n);
     }
     n.remove();
   }
 }
-function W(i, o) {
+function S(i, o) {
   for (const n of Array.from(i.querySelectorAll(":scope > *"))) {
     const t = n;
     if (t.offsetHeight <= o || t.tagName === "TABLE")
       continue;
-    const r = t.tagName, e = t.getAttribute("style") || "", a = getComputedStyle(t).width, c = (t.textContent || "").split(/\s+/).filter(Boolean), d = document.createElement(r);
-    d.setAttribute("style", e), Object.assign(d.style, {
+    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, {
       position: "absolute",
       visibility: "hidden",
       width: a
-    }), i.appendChild(d);
+    }), i.appendChild(s);
     const h = [];
-    let s = 0;
-    for (; s < c.length; ) {
-      let f = s + 1, l = c.length;
-      for (; f < l; ) {
-        const m = Math.ceil((f + l) / 2);
-        d.textContent = c.slice(s, m).join(" "), d.offsetHeight <= o ? f = m : l = m - 1;
+    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;
       }
       const g = document.createElement(r);
-      g.setAttribute("style", e), g.textContent = c.slice(s, f).join(" "), h.push(g), s = f;
+      g.setAttribute("style", e), g.textContent = l.slice(c, f).join(" "), h.push(g), c = f;
     }
-    d.remove();
+    s.remove();
     for (const f of h)
       t.parentNode.insertBefore(f, t);
     t.remove();
   }
 }
-function P(i, o) {
+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 c = document.createElement("div");
-      c.style.height = a - r + 1 + "px", t.parentNode.insertBefore(c, t);
+      const l = document.createElement("div");
+      l.style.height = a - r + 1 + "px", t.parentNode.insertBefore(l, t);
     }
   }
 }
 function B(i, o = {}) {
-  const n = C(o), t = v(i, n.pageWidth), r = k(t);
-  A(t);
-  const e = x(t, n);
-  return S(t, e.pageContentPx), W(t, e.pageContentPx), P(t, e.pageContentPx), {
+  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: e,
+    layout: r,
     options: n,
-    cleanup: () => {
-      r(), t.remove();
-    }
+    cleanup: () => t.remove()
   };
 }
-async function D(i, o, n = {}) {
+async function R(i, o, n = {}) {
   const { clone: t, layout: r, options: e, cleanup: a } = B(o, n);
   try {
-    await new Promise((c) => {
+    await new Promise((l) => {
       i.html(t, {
-        callback: () => c(),
+        callback: () => l(),
         width: r.contentWidthMm,
         windowWidth: r.renderedWidth,
         margin: [
@@ -164,51 +201,51 @@ async function D(i, o, n = {}) {
   }
   return i;
 }
-async function O(i, o = {}) {
-  const { imageFormat: n = "JPEG", imageQuality: t = 1, scale: r = 2 } = o, e = C(o), a = v(i, e.pageWidth);
-  a.style.opacity = "1", a.style.left = "-99999px", A(a);
-  const c = x(a, e);
-  S(a, c.pageContentPx), W(a, c.pageContentPx), P(a, c.pageContentPx);
+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);
   try {
-    const d = await j(a, {
+    const s = await N(a, {
       scale: r,
       backgroundColor: "#ffffff"
-    }), { jsPDF: h } = await import("jspdf"), s = e.pageWidth - e.margin.left - e.margin.right, f = e.pageHeight - e.margin.top - e.margin.bottom, l = d.width, g = f / s * l, m = Math.ceil(d.height / g), H = e.pageWidth > e.pageHeight ? "l" : "p", w = new h({
+    }), { 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,
       unit: "mm",
       format: [e.pageWidth, e.pageHeight]
     });
-    for (let u = 0; u < m; u++) {
-      const p = Math.min(
+    for (let p = 0; p < m; p++) {
+      const u = Math.min(
         g,
-        d.height - u * g
-      ), y = document.createElement("canvas");
-      y.width = l, 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, l, p), b.drawImage(
-        d,
+        s.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,
         0,
-        u * g,
-        l,
-        p,
+        p * g,
+        d,
+        u,
         0,
         0,
-        l,
-        p
+        d,
+        u
       );
-      const M = y.toDataURL(
+      const M = b.toDataURL(
         `image/${n.toLowerCase()}`,
         t
       );
-      u > 0 && w.addPage([e.pageWidth, e.pageHeight], H);
-      const E = p / l * s;
+      p > 0 && w.addPage([e.pageWidth, e.pageHeight], H);
+      const E = u / d * c;
       w.addImage(
         M,
         n,
         e.margin.left,
         e.margin.top,
-        s,
+        c,
         E,
         void 0,
         "FAST"
@@ -220,16 +257,16 @@ async function O(i, o = {}) {
   }
 }
 export {
-  T as PAGE_MARGINS,
-  N as PAGE_SIZES,
+  k as PAGE_MARGINS,
+  T as PAGE_SIZES,
   x as computeLayout,
-  v as createPrintClone,
-  P as insertPageBreakSpacers,
-  A as normalizeTableAttributes,
+  P as createPrintClone,
+  q as inlineComputedStyles,
+  W as insertPageBreakSpacers,
+  v as normalizeTableAttributes,
   B as prepare,
-  D as renderHTML,
-  O as renderImagePDF,
-  k as resetFrameworkCSS,
-  S as splitOversizedTables,
-  W as splitOversizedText
+  R as renderHTML,
+  j as renderImagePDF,
+  C as splitOversizedTables,
+  S as splitOversizedText
 };

package/package.json

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