jspdf-utils 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+# jsPDF Utils
+
+HTML to PDF utilities for jsPDF with support for Arabic text, tables, and automatic page breaking.
+
+## Installation
+
+```bash
+npm install jspdf-utils jspdf html2canvas
+```
+
+## Usage
+
+```javascript
+import jsPDF from "jspdf";
+import { renderHTML } from "jspdf-utils";
+
+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");
+
+// Render HTML element to PDF
+const element = document.getElementById("content");
+await renderHTML(doc, element);
+
+doc.save("output.pdf");
+```
+
+## Features
+
+- **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
+
+## Development
+
+### Running the Example
+
+```bash
+npm install
+npm run dev
+# Open http://localhost:5173
+```
+
+### Project Structure
+
+```
+├── src/
+│   └── html-to-pdf.js    # Main utility functions
+├── index.html             # Example/demo page
+└── package.json
+```
+
+## API
+
+### `renderHTML(doc, source, opts)`
+
+Renders an HTML element to PDF.
+
+- **doc**: jsPDF instance
+- **source**: HTML element to render
+- **opts**: Optional configuration (overrides defaults)
+
+### `prepare(source, opts)`
+
+Prepares an HTML element for rendering (used internally by renderHTML).
+
+Returns: `{ clone, layout, options, cleanup }`
+
+### Default Options
+
+```javascript
+{
+  unit: 'mm',
+  format: 'a4',
+  pageWidth: 210,
+  pageHeight: 297,
+  margin: { top: 20, right: 20, bottom: 20, left: 20 }
+}
+```
+
+## License
+
+MIT

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

@@ -0,0 +1,84 @@
+/**
+ * jsPDF doc.html() utilities
+ *
+ * Helpers that prepare an HTML element for clean, paginated PDF output
+ * via jsPDF's doc.html() renderer.
+ */
+import type { jsPDF } from "jspdf";
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type PageFormat = "a0" | "a1" | "a2" | "a3" | "a4" | "a5" | "a6" | "letter" | "legal" | "tabloid";
+export interface PageOptions {
+    unit: string;
+    format: PageFormat;
+    pageWidth: number;
+    pageHeight: number;
+    margin: Margin;
+}
+/** Standard page dimensions in mm (portrait). */
+declare const PAGE_SIZES: Record<PageFormat, [number, number]>;
+/** Standard margins in mm per format. */
+declare const PAGE_MARGINS: Record<PageFormat, number>;
+export interface Layout {
+    renderedWidth: number;
+    scale: number;
+    contentWidthMm: number;
+    pageContentPx: number;
+}
+export interface PrepareResult {
+    clone: HTMLElement;
+    layout: Layout;
+    options: PageOptions;
+    cleanup: () => void;
+}
+/** 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;
+/**
+ * Convert HTML table attributes (cellpadding, cellspacing, border) to
+ * inline CSS so doc.html()'s renderer picks them up.
+ */
+declare function normalizeTableAttributes(container: HTMLElement): void;
+/**
+ * Split tables that exceed one page height into smaller sub-tables,
+ * repeating the header row in each chunk.
+ *
+ * Only operates on direct-child tables of `container`.
+ */
+declare function splitOversizedTables(container: HTMLElement, pageContentPx: number): void;
+/**
+ * Split direct-child elements (non-table) that are taller than one page
+ * 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. */
+declare function insertPageBreakSpacers(container: HTMLElement, pageContentPx: number): void;
+/**
+ * Prepare an HTML element for doc.html() rendering.
+ *
+ * Clones the element, splits oversized tables/text, and inserts page-break
+ * spacers. Returns the ready-to-render clone and layout metadata.
+ */
+declare function prepare(source: HTMLElement, opts?: Partial<PageOptions>): PrepareResult;
+/**
+ * Render an HTML element to PDF using doc.html().
+ */
+declare function renderHTML(doc: jsPDF, source: HTMLElement, opts?: Partial<PageOptions>): Promise<jsPDF>;
+export interface ImagePDFOptions {
+    imageFormat?: "JPEG" | "PNG";
+    imageQuality?: number;
+    scale?: number;
+}
+/**
+ * Render an HTML element as an image-based PDF. Each page is a rasterized
+ * 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, };

package/dist/html-to-pdf.js

@@ -0,0 +1,226 @@
+import N from "html2canvas";
+const T = {
+  a0: [841, 1189],
+  a1: [594, 841],
+  a2: [420, 594],
+  a3: [297, 420],
+  a4: [210, 297],
+  a5: [148, 210],
+  a6: [105, 148],
+  letter: [215.9, 279.4],
+  legal: [215.9, 355.6],
+  tabloid: [279.4, 431.8]
+}, B = {
+  a0: 40,
+  a1: 35,
+  a2: 30,
+  a3: 25,
+  a4: 25,
+  a5: 20,
+  a6: 12,
+  letter: 25.4,
+  legal: 25.4,
+  tabloid: 25
+};
+function x(i = {}) {
+  const o = i.format ?? "a4", [n, t] = T[o], r = i.pageWidth ?? n, e = i.pageHeight ?? t, a = B[o], c = {
+    top: a,
+    right: a,
+    bottom: a,
+    left: a
+  };
+  return {
+    unit: i.unit ?? "mm",
+    format: o,
+    pageWidth: r,
+    pageHeight: e,
+    margin: { ...c, ...i.margin }
+  };
+}
+function A(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) {
+  const n = i.cloneNode(!0);
+  return Object.assign(n.style, {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    boxSizing: "border-box",
+    width: o + "mm",
+    opacity: "0.000001",
+    pointerEvents: "none"
+  }), document.body.appendChild(n), n;
+}
+function W(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 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, f = o - c - 2, h = [];
+    let l = [], d = 0;
+    for (const s of a) {
+      const g = s.offsetHeight;
+      d + g > f && l.length > 0 && (h.push(l), l = [], d = 0), l.push(s), d += g;
+    }
+    l.length > 0 && h.push(l);
+    for (const s of h) {
+      const g = n.cloneNode(!1);
+      e && g.appendChild(e.cloneNode(!0));
+      for (const m of s) g.appendChild(m.cloneNode(!0));
+      n.parentNode.insertBefore(g, n);
+    }
+    n.remove();
+  }
+}
+function P(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), f = document.createElement(r);
+    f.setAttribute("style", e), Object.assign(f.style, {
+      position: "absolute",
+      visibility: "hidden",
+      width: a
+    }), i.appendChild(f);
+    const h = [];
+    let l = 0;
+    for (; l < c.length; ) {
+      let d = l + 1, s = c.length;
+      for (; d < s; ) {
+        const m = Math.ceil((d + s) / 2);
+        f.textContent = c.slice(l, m).join(" "), f.offsetHeight <= o ? d = m : s = m - 1;
+      }
+      const g = document.createElement(r);
+      g.setAttribute("style", e), g.textContent = c.slice(l, d).join(" "), h.push(g), l = d;
+    }
+    f.remove();
+    for (const d of h)
+      t.parentNode.insertBefore(d, t);
+    t.remove();
+  }
+}
+function M(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);
+    }
+  }
+}
+function j(i, o = {}) {
+  const n = x(o), t = v(i, n.pageWidth);
+  W(t);
+  const r = A(t, n);
+  return C(t, r.pageContentPx), P(t, r.pageContentPx), M(t, r.pageContentPx), {
+    clone: t,
+    layout: r,
+    options: n,
+    cleanup: () => t.remove()
+  };
+}
+async function D(i, o, n = {}) {
+  const { clone: t, layout: r, options: e, cleanup: a } = j(o, n);
+  try {
+    await new Promise((c) => {
+      i.html(t, {
+        callback: () => c(),
+        width: r.contentWidthMm,
+        windowWidth: r.renderedWidth,
+        margin: [
+          e.margin.top,
+          e.margin.right,
+          e.margin.bottom,
+          e.margin.left
+        ]
+      });
+    });
+  } finally {
+    a();
+  }
+  return i;
+}
+async function F(i, o = {}) {
+  const { imageFormat: n = "JPEG", imageQuality: t = 1, scale: r = 2 } = o, e = x(o), a = v(i, e.pageWidth);
+  a.style.opacity = "1", a.style.left = "-99999px", W(a);
+  const c = A(a, e);
+  C(a, c.pageContentPx), P(a, c.pageContentPx), M(a, c.pageContentPx);
+  try {
+    const f = await N(a, {
+      scale: r,
+      backgroundColor: "#ffffff"
+    }), { jsPDF: h } = await import("jspdf"), l = e.pageWidth - e.margin.left - e.margin.right, d = e.pageHeight - e.margin.top - e.margin.bottom, s = f.width, g = d / l * s, m = Math.ceil(f.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(
+        g,
+        f.height - u * g
+      ), y = document.createElement("canvas");
+      y.width = s, 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, s, p), b.drawImage(
+        f,
+        0,
+        u * g,
+        s,
+        p,
+        0,
+        0,
+        s,
+        p
+      );
+      const E = y.toDataURL(
+        `image/${n.toLowerCase()}`,
+        t
+      );
+      u > 0 && w.addPage([e.pageWidth, e.pageHeight], H);
+      const S = p / s * l;
+      w.addImage(
+        E,
+        n,
+        e.margin.left,
+        e.margin.top,
+        l,
+        S,
+        void 0,
+        "FAST"
+      );
+    }
+    return w;
+  } finally {
+    a.remove();
+  }
+}
+export {
+  B as PAGE_MARGINS,
+  T as PAGE_SIZES,
+  A as computeLayout,
+  v as createPrintClone,
+  M as insertPageBreakSpacers,
+  W as normalizeTableAttributes,
+  j as prepare,
+  D as renderHTML,
+  F as renderImagePDF,
+  C as splitOversizedTables,
+  P as splitOversizedText
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "jspdf-utils",
+  "version": "0.1.0",
+  "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",
+  "types": "dist/html-to-pdf.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/html-to-pdf.d.ts",
+      "import": "./dist/html-to-pdf.js"
+    }
+  },
+  "keywords": [
+    "jspdf",
+    "html-to-pdf",
+    "pdf",
+    "page-break",
+    "table-split",
+    "rtl",
+    "arabic"
+  ],
+  "author": "Muaath <muath.ghassan98@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maath9826/jsPDF-utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/maath9826/jsPDF-utils/issues"
+  },
+  "homepage": "https://github.com/maath9826/jsPDF-utils#readme",
+  "peerDependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.1.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.1.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}