PDF Document Builder

A powerful library for building structured PDF documents with form fields, tables, sections, and automatic pagination - built on jsPDF.

Features

• Form Fields: Input fields with labels, Yes/No radio buttons, checkboxes
• Section Headers: Three-level hierarchy (main, sub, subsub) with customizable styling
• Tables: Automatic alternating row colors, column alignment, headers
• Table of Contents: Auto-generated with clickable internal links
• Automatic Pagination: Content flows naturally across pages
• Theming: Fully customizable colors, fonts, and spacing
• Pre-built Themes: Blue, Corporate, Teal, Purple, Warm
• TypeScript: Full type definitions included

Installation

npm install pdf-document-builder jspdf

Note: jspdf is a peer dependency and must be installed separately.

Quick Start

import { PDFDocument } from 'pdf-document-builder'

// Create a new document
const doc = new PDFDocument()

// Set metadata
doc.setMetadata({
    title: 'Employee Report',
    author: 'HR Department',
})

// Add a title
doc.title('Employee Report', '2024 Annual Review')

// Add a section
doc.sectionHeader('Personal Information', 'main')

// Add form fields
doc.inputField('Full Name:', 'John Doe')
doc.inputField('Department:', 'Engineering')
doc.radioField('Full-time Employee?', true)
doc.checkboxField('Eligible for Bonus', true)

// Add multiple fields per row (2 or 3 fields)
doc.inputFields([
    { label: 'Start Date:', value: '01/15/2020' },
    { label: 'Manager:', value: 'Jane Smith' },
])

// Add a sub-section
doc.sectionHeader('Performance Metrics', 'sub')

// Add a table
doc.table(
    [
        { header: 'Quarter', width: 100 },
        { header: 'Target', width: 100, align: 'right' },
        { header: 'Actual', width: 100, align: 'right' },
    ],
    [
        ['Q1', '$50,000', '$52,000'],
        ['Q2', '$55,000', '$58,000'],
        ['Q3', '$60,000', '$62,000'],
        ['Q4', '$65,000', '$70,000'],
    ]
)

// Save the document
doc.save('employee-report.pdf')

Theming

Using Pre-built Themes

import { PDFDocument, themes } from 'pdf-document-builder'

// Use the blue theme
const doc = new PDFDocument({ theme: themes.blue })

// Available themes: teal (default), blue, corporate, purple, warm

Creating Custom Themes

import { PDFDocument, createTheme } from 'pdf-document-builder'

const myTheme = createTheme({
    colors: {
        primary: [220, 53, 69], // Red
        primaryLight: [255, 240, 240],
        row: {
            even: [255, 255, 255],
            odd: [255, 245, 245],
        },
        section: {
            mainBg: [220, 53, 69],
            mainText: [255, 255, 255],
            subBg: [255, 230, 230],
            subBorder: [220, 53, 69],
        },
    },
    footer: {
        branding: 'My Company Name',
        showPageNumbers: true,
    },
})

const doc = new PDFDocument({ theme: myTheme })

Theme Configuration Options

interface PDFTheme {
    colors: {
        black: RGBColor
        white: RGBColor
        gray: {
            dark: RGBColor
            medium: RGBColor
            light: RGBColor
            lighter: RGBColor
            border: RGBColor
        }
        primary: RGBColor
        primaryLight: RGBColor
        primaryDark: RGBColor
        row: {
            even: RGBColor
            odd: RGBColor
        }
        section: {
            mainBg: RGBColor
            mainText: RGBColor
            subBg: RGBColor
            subBorder: RGBColor
        }
    }
    page: {
        width: number
        height: number
        margin: {
            top: number
            right: number
            bottom: number
            left: number
        }
    }
    fonts: {
        default: string
        sizes: {
            title: number
            header: number
            subheader: number
            body: number
            small: number
            label: number
        }
    }
    spacing: {
        lineHeight: number
        sectionGap: number
        fieldGap: number
        rowGap: number
        paragraphGap: number
        checkboxSize: number
        checkboxGap: number
    }
    fieldLayout: {
        labelWidth: number
        valuePadding: number
        underlineOffset: number
        radioSpacing: number
    }
    footer: {
        height: number
        textSize: number
        branding?: string
        showPageNumbers?: boolean
    }
}

API Reference

PDFDocument

Constructor

new PDFDocument(options?: {
    theme?: Partial<PDFTheme>
    orientation?: 'portrait' | 'landscape'
    format?: 'a4' | 'letter' | 'legal'
})

Metadata

doc.setMetadata({
    title: string
    author?: string
    subject?: string
    keywords?: string[]
    creator?: string
})

Document Title

doc.title(text: string, subtitle?: string): number

Section Headers

doc.sectionHeader(title: string, level: 'main' | 'sub' | 'subsub'): number

Form Fields

// Single input field with label and underline
doc.inputField(label: string, value: FieldValue, x?: number, labelWidth?: number): number

// Yes/No radio buttons
doc.radioField(label: string, value: boolean | undefined, x?: number, labelWidth?: number): number

// Checkbox
doc.checkboxField(label: string, checked: boolean, x?: number): number

// Multiple fields per row (2-3 fields)
doc.inputFields(fields: { label: string; value: FieldValue }[], x?: number): number

Tables

doc.table(
    columns: { header: string; width: number; align?: 'left' | 'center' | 'right' }[],
    rows: FieldValue[][],
    showHeader?: boolean
): number

Table of Contents

// Reserve space for TOC at current position
doc.markTOCPosition(estimatedEntries?: number): void

// Render TOC (call after all sections)
doc.renderTOC(title?: string): number

Page Management

doc.addPage(): void
doc.ensureSpace(requiredSpace: number): void
doc.needsNewPage(requiredSpace: number): boolean

Output

doc.save(filename: string): void
doc.getBlob(): Blob
doc.getDataUrl(): string
doc.getArrayBuffer(): ArrayBuffer

Formatters

The library includes utility formatters that can be imported separately:

import {
    formatValue,
    formatDate,
    formatCurrency,
    formatPercentage,
    formatPhone,
    formatSSN,
    formatEIN,
    formatAddress,
    titleCase,
    formatYesNo,
    formatList,
    truncate,
    formatNumber,
    formatFileSize,
} from 'pdf-document-builder/formatters'

// Examples
formatCurrency(1234.56)           // "$1,234.56"
formatDate(new Date())            // "12/04/2024"
formatPhone('5551234567')         // "(555) 123-4567"
formatSSN('123456789')            // "XXX-XX-6789"
formatPercentage(75)              // "75%"

Examples

Invoice

import { PDFDocument } from 'pdf-document-builder'

const doc = new PDFDocument()

doc.setMetadata({ title: 'Invoice #1234' })
doc.title('INVOICE', 'Invoice #1234')

doc.sectionHeader('Bill To', 'main')
doc.inputField('Company:', 'Acme Corporation')
doc.inputField('Address:', '123 Main St, City, State 12345')

doc.sectionHeader('Items', 'main')
doc.table(
    [
        { header: 'Description', width: 250 },
        { header: 'Qty', width: 50, align: 'right' },
        { header: 'Price', width: 80, align: 'right' },
        { header: 'Total', width: 80, align: 'right' },
    ],
    [
        ['Widget A', 10, '$5.00', '$50.00'],
        ['Widget B', 5, '$10.00', '$50.00'],
        ['Service Fee', 1, '$25.00', '$25.00'],
    ]
)

doc.inputField('Subtotal:', '$125.00')
doc.inputField('Tax (8%):', '$10.00')
doc.inputField('Total:', '$135.00')

doc.save('invoice-1234.pdf')

Multi-page Report with TOC

import { PDFDocument, themes } from 'pdf-document-builder'

const doc = new PDFDocument({ theme: themes.corporate })

doc.setMetadata({ title: 'Annual Report 2024' })
doc.title('Annual Report', '2024')

// Reserve space for TOC
doc.markTOCPosition(5)

// Add sections (these will appear in TOC)
doc.sectionHeader('Executive Summary', 'main')
doc.inputField('Revenue:', '$10.5M')
doc.inputField('Growth:', '15%')

doc.sectionHeader('Financial Overview', 'main')
// ... more content

doc.sectionHeader('Operations', 'main')
// ... more content

// Render TOC at the reserved position
doc.renderTOC()

doc.save('annual-report-2024.pdf')

License

MIT