Package Exports

jspdf-utils

Readme

jsPDF Utils

Utilities for rendering HTML into paginated PDF output with jsPDF and html2canvas-pro.

Installation

npm install jspdf-utils

jspdf and html2canvas-pro are peer dependencies and will be installed automatically.

Exported API

generatePDF(doc, source, opts)
generateImagePDF(source, opts)
generateImages(source, opts)
previewImages(source, container, opts)
PAGE_SIZES
PAGE_MARGINS
Types: PageOptions, PageOptionsInput, ImagePDFOptions, MarginContentInput, Border, TextBorder

Type import example:

import type { PageOptionsInput } from "jspdf-utils";

Quick Start

1) HTML -> vector/text PDF (`doc.html`)

import jsPDF from "jspdf";
import { generatePDF } from "jspdf-utils";

const target = document.getElementById("print-section");
if (!target) throw new Error("Missing #print-section");

const doc = new jsPDF({ unit: "mm" });

// Optional for Arabic/RTL text:
// doc.addFont("/fonts/arial.ttf", "arial", "normal");
// doc.addFont("/fonts/arial-bold.ttf", "arial", "bold");

await generatePDF(doc, target, {
  format: "a4",
  margin: { top: 20, right: 20, bottom: 20, left: 20 },
  forcedPageCount: 1,
});

doc.save("output.pdf");

2) HTML -> image-based PDF (raster pages)

import { generateImagePDF } from "jspdf-utils";

const target = document.getElementById("print-section");
if (!target) throw new Error("Missing #print-section");

const imagePDF = await generateImagePDF(target, {
  format: "a5",
  imageFormat: "PNG",
  forcedPageCount: 1,
});

imagePDF.save("output-image.pdf");

3) Preview pages as images in a container

import { previewImages } from "jspdf-utils";

const target = document.getElementById("print-section");
const preview = document.getElementById("preview-container");
if (!target || !preview) throw new Error("Missing preview elements");

await previewImages(target, preview, {
  format: "a5",
  forcedPageCount: 1,
});

Options

`PageOptionsInput`

unit?: string (default: "mm")
format?: "a0" | "a1" | "a2" | "a3" | "a4" | "a5" | "a6" | "letter" | "legal" | "tabloid" (default: "a4")
pageWidth?: number (default comes from format)
pageHeight?: number (default comes from format)
margin?: number | { top?: number; right?: number; bottom?: number; left?: number }

Important:

generatePDF, generateImagePDF, generateImages, and previewImages use page sizing from their opts (format / pageWidth / pageHeight).
Do not rely on new jsPDF({ format: ... }) to control layout in generatePDF; pass format in opts instead.

`ImagePDFOptions`

imageFormat?: "JPEG" | "PNG"
imageQuality?: number
scale?: number
marginContent?: MarginContentInput
border?: Border
textBorder?: TextBorder
forcedPageCount?: number

forcedPageCount behavior:

Forces output to the first N pages only.
generatePDF: trims extra pages after doc.html rendering.
generateImagePDF: only rasterizes and writes first N pages.
generateImages and previewImages: only returns/displays first N pages.
Invalid values (<= 0, NaN, Infinity) are ignored.

Margin Content and Borders

marginContent, border, and textBorder are independent, top-level page options. Each has its own margin property that controls its distance from the page edge, fully decoupled from the main margin (which only controls where the HTML content is placed).

`MarginContentInput`

top, right, bottom, left — each accepts:
- HTMLElement or string (static, rendered once and reused), or
- (page: number, totalPages: number) => HTMLElement | string (per-page)
margin? — distance in mm from the page edge to the content area (default: format default margin)

`Border`

Draws a vector rectangle around the page.

color?: string (default: "#000000")
width?: number — line width in mm (default: 0.3)
margin? — distance in mm from the page edge to the border (default: page margin)

`TextBorder`

Draws repeated text along all four page edges.

text: string — the text to repeat
color?: string (default: "#000000")
fontSize?: number — in mm (default: 2.5)
fontFamily?: string (default: "Arial, sans-serif")
fontWeight?: string (default: "normal")
gap?: number — gap between repetitions in mm (default: fontSize * 0.5)
margin? — distance in mm from the page edge to the text border (default: page margin)

Rendering order

Margin content, borders, and text borders are rendered beneath page content.
Main document content stays visually above them.

Development

npm install
npm run dev

Open http://localhost:5173.

License

MIT

jspdf-utils