PDF Form Generator

Contact me at Rushikesh Saraf Linkedin

A truly generic, grid-based PDF form builder for Node.js. Build ANY form by adding rows with cells that can span columns - just like CSS Grid or Bootstrap!

The Concept

Think of your PDF as a 12-column grid. Each row you add contains cells, and each cell can span 1 or more columns. This makes it super flexible to create ANY form layout.

|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  | 10  | 11  | 12  |
|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|     Header (span: 12)                                                 |
|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
| Date (2) | Value (4)   | Time (2)  | Value (4)                        |
|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
| Full width content area (span: 12)                                    |

Installation

npm install

Quick Start

import { PDFFormBuilder } from './src/index.js';

// Create a 12-column grid PDF
const pdf = new PDFFormBuilder({ columns: 12 });

// Add rows with cells - each cell can span multiple columns
pdf.addRow([
  { content: 'Form Title', span: 12, bold: true, fontSize: 16, align: 'center' }
]);

pdf.addRow([
  { content: 'Date:', span: 2, bold: true },
  { content: '08/12/2024', span: 4 },
  { content: 'Time:', span: 2, bold: true },
  { content: '09:30', span: 4 }
]);

pdf.addRow([
  { content: 'Description:', span: 12, bold: true }
]);

pdf.addRow([
  { content: 'Your multi-line content goes here...', span: 12 }
], { height: 50 });

await pdf.save('./output/my-form.pdf');

Cell Options

Every cell supports these options:

{
  content: 'Text content',       // The text to display
  span: 3,                       // Columns to span (1-12)
  
  // TEXT STYLING
  bold: true,
  italic: true,
  fontSize: 12,
  color: '#000000',
  align: 'left',                 // 'left', 'center', 'right'
  valign: 'middle',              // 'top', 'middle', 'bottom'
  
  // CELL STYLING
  backgroundColor: '#f0f0f0',
  padding: 4,
  
  // BORDERS (true/false for each side)
  border: true,                  // All borders
  borderTop: true,
  borderBottom: false,
  borderLeft: true,
  borderRight: true,
  borderColor: '#cccccc',
  borderWidth: 0.5,
  
  // SPECIAL TYPES
  checkbox: true,                // Render as checkbox
  checked: true,                 // Is checkbox checked?
  
  image: '/path/to/image.png',   // Insert image
  imageHeight: 30
}

Row Options

pdf.addRow(cells, {
  height: 25,        // Fixed height
  // OR
  height: 'auto',    // Auto-height based on content
  minHeight: 15,
  maxHeight: 100
});

API Reference

Constructor

const pdf = new PDFFormBuilder({
  columns: 12,           // Grid columns (default: 12)
  size: 'A4',            // Page size
  margins: { top: 30, bottom: 30, left: 30, right: 30 },
  fontSize: 9,           // Default font size
  rowHeight: 20,         // Default row height
  padding: 4,            // Default cell padding
  lineWidth: 0.5         // Border line width
});

Core Methods

| Method | Description | |--------|-------------| | addRow(cells, options) | Add a row with cells | | addRows(rows, options) | Add multiple rows at once | | addHeader(config) | Add a document header with logo, title, info | | addTable(config) | Add a data table | | addSection(rows, options) | Add rows with a border around all | | addText(text, options) | Add free text (not in cells) | | addDivider(options) | Add a horizontal line | | addSpace(amount) | Add vertical space | | newPage() | Add a page break | | save(path) | Save to file | | toBuffer() | Get as buffer |

Examples

1. Basic Form

const pdf = new PDFFormBuilder({ columns: 12 });

pdf.addRow([
  { content: 'Registration Form', span: 12, bold: true, fontSize: 18, align: 'center' }
], { height: 40 });

pdf.addRow([
  { content: 'Name:', span: 2, bold: true },
  { content: '', span: 10 }
]);

pdf.addRow([
  { content: 'Email:', span: 2, bold: true },
  { content: '', span: 4 },
  { content: 'Phone:', span: 2, bold: true },
  { content: '', span: 4 }
]);

await pdf.save('./form.pdf');

2. Checkboxes

pdf.addRow([
  { content: 'Options:', span: 2, bold: true },
  { content: 'Option A', checkbox: true, checked: true, span: 2 },
  { content: 'Option B', checkbox: true, checked: false, span: 2 },
  { content: 'Option C', checkbox: true, checked: false, span: 2 },
  { content: '', span: 4 }
]);

3. Table Data

// Header
pdf.addRow([
  { content: 'Item', span: 4, bold: true, backgroundColor: '#333', color: '#fff' },
  { content: 'Qty', span: 2, bold: true, backgroundColor: '#333', color: '#fff' },
  { content: 'Price', span: 3, bold: true, backgroundColor: '#333', color: '#fff' },
  { content: 'Total', span: 3, bold: true, backgroundColor: '#333', color: '#fff' }
]);

// Rows
pdf.addRow([
  { content: 'Widget A', span: 4 },
  { content: '10', span: 2, align: 'center' },
  { content: '$25.00', span: 3, align: 'right' },
  { content: '$250.00', span: 3, align: 'right' }
]);

4. Multi-line Content

pdf.addRow([
  { 
    content: 'This is a long description that will wrap to multiple lines within the cell.',
    span: 12,
    valign: 'top',
    padding: 8
  }
], { height: 'auto', minHeight: 40 });

5. Custom Borders

// Merge cells by removing borders between them
pdf.addRow([
  { content: 'Section Title', span: 12, bold: true, borderBottom: false }
]);
pdf.addRow([
  { content: 'Content below title', span: 12, borderTop: false }
]);

6. Header with Logo

pdf.addHeader({
  logo: '/path/to/logo.png',
  logoSpan: 3,
  logoHeight: 40,
  
  title: 'Company Name',
  titleStyle: { bold: true, fontSize: 16 },
  
  subtitle: 'Document Title',
  subtitleStyle: { fontSize: 11 },
  
  info: [
    'DOC/001',
    'Rev: 02',
    'Date: 08/12/2024'
  ],
  infoSpan: 3,
  height: 60
});

7. Different Grid Sizes

// Use 16 columns for attendance sheets, calendars
const pdf = new PDFFormBuilder({ columns: 16 });

// Use 6 columns for simpler forms
const pdf = new PDFFormBuilder({ columns: 6 });

Building ANY Form

The same library builds completely different forms:

Breakdown Slip

pdf.addRow([
  { content: 'Date:', span: 2, bold: true },
  { content: '08/12/2024', span: 2 },
  { content: 'Machine:', span: 2, bold: true },
  { content: 'CNC-001', span: 6 }
]);

pdf.addRow([
  { content: '* Problem Description:', span: 12, bold: true }
]);

pdf.addRow([
  { content: 'Machine stopped unexpectedly...', span: 12 }
], { height: 50 });

Invoice

pdf.addRow([
  { content: 'INVOICE', span: 12, fontSize: 24, align: 'center', backgroundColor: '#2c3e50', color: '#fff' }
], { height: 50 });

pdf.addRow([
  { content: 'From:', span: 6, bold: true },
  { content: 'Bill To:', span: 6, bold: true }
]);

Attendance Sheet

const pdf = new PDFFormBuilder({ columns: 16 });

pdf.addRow([
  { content: 'Name', span: 4, bold: true },
  ...Array.from({ length: 12 }, (_, i) => ({ content: (i+1).toString(), span: 1 }))
]);

Project Structure

pdf-form-generator/
├── src/
│   ├── index.js              # Main export
│   ├── core/
│   │   └── PDFFormBuilder.js # The generic builder
│   └── utils/
│       └── helpers.js        # Utility functions
├── examples/
│   ├── generic-form.js       # Breakdown slip (generic way)
│   └── different-forms.js    # Invoice & Attendance examples
├── output/                   # Generated PDFs
└── package.json

Running Examples

# Breakdown slip using generic approach
node examples/generic-form.js

# Invoice and Attendance sheet
node examples/different-forms.js

License

MIT