index.md

HTML to PDF Generator - Documentation

A modern, framework-agnostic library for converting HTML to professional multi-page PDFs with smart pagination and rich features.

📚 Documentation Navigation

Getting Started

• Quick Start Guide - Install and create your first PDF in 5 minutes
• Installation - Detailed installation instructions for different environments

Framework Guides

• React Guide - Using with React applications
• Vue Guide - Using with Vue 3 applications
• Svelte Guide - Using with Svelte applications
• Vanilla JavaScript Guide - Using with plain JavaScript/TypeScript
• Server-Side Guide - Using with Node.js and Puppeteer

Core Features

• Multi-Page Generation - Automatic page splitting and pagination
• Image Handling - Basic image handling to DPI control and print quality
• Table Support - Smart table pagination with header repetition
• Page Breaks - Control page splitting behavior
• Color Management - OKLCH & Tailwind CSS support

Advanced Features

• Watermarks - Add text & image watermarks
• Headers & Footers - Dynamic header/footer templates
• Metadata - Set document properties
• Security & Encryption - Password protection & permissions
• PDF Preview - Real-time PDF preview with live updates
• Batch Generation - Combine multiple content items
• Image Optimization - DPI control & print quality
• URL to PDF - Convert web pages to PDF (Server-side)

API Reference

• Options Reference - Complete options documentation

Examples

• Code Examples - Copy-paste ready code samples
• Production Examples - Real-world use cases

Resources

• Best Practices - Optimize performance and quality
• Troubleshooting - Common issues and solutions

---

Quick Links

Installation

npm install @encryptioner/html-to-pdf-generator

Basic Usage

import { generatePDF } from '@encryptioner/html-to-pdf-generator';

const element = document.getElementById('content');
await generatePDF(element, 'document.pdf', {
  format: 'a4',
  showPageNumbers: true,
});

With React

import { usePDFGenerator } from '@encryptioner/html-to-pdf-generator/react';

function MyComponent() {
  const { targetRef, generatePDF, isGenerating, progress } = usePDFGenerator({
    filename: 'document.pdf',
  });

  return (
    <>
      <div ref={targetRef}>{/* Your content */}</div>
      <button onClick={generatePDF} disabled={isGenerating}>
        {isGenerating ? `${progress}%` : 'Download PDF'}
      </button>
    </>
  );
}

---

Key Features at a Glance

• ✅ Multi-page support with smart pagination
• ✅ Framework adapters for React, Vue, Svelte
• ✅ OKLCH color support and Tailwind CSS compatibility
• ✅ Image optimization with SVG conversion & DPI control
• ✅ Table pagination with header repetition
• ✅ Watermarks (text and image)
• ✅ Headers/Footers with dynamic template variables
• ✅ PDF Metadata (title, author, subject, keywords)
• ✅ PDF Security (password protection & permissions)
• ✅ PDF Preview (real-time preview with live updates)
• ✅ Media type emulation (@media print support)
• ✅ Full TypeScript support
• ✅ Progress tracking
• ✅ Batch generation with PDF merging

---

Documentation Structure

documentation/
├── index.md (you are here)
│
├── guides/
│   ├── getting-started.md      # Quick start tutorial
│   ├── installation.md         # Installation guide
│   ├── react-guide.md          # React integration
│   ├── vue-guide.md            # Vue integration
│   ├── svelte-guide.md         # Svelte integration
│   ├── vanilla-guide.md        # Vanilla JS integration
│   ├── server-side-guide.md    # Node.js/Puppeteer usage
│   ├── best-practices.md       # Optimization tips
│   └── troubleshooting.md      # Common issues
│
├── features/
│   └── colors.md               # Color support
│   └── images.md               # Image support
│   └── page-breaks.md          # Handling page break
│   └── multi-page.md           # Page splitting
│   └── tables.md               # Table support
│
├── advanced/
│   └── batch-generation.md     # Combine multiple content items
│   └── headers-footers.md      # Dynamic header/footer templates
│   └── image-optimization.md   # DPI control & print quality
│   └── metadata.md             # Set document properties
│   └── preview.md              # Real-time PDF preview with live updates
│   └── security.md             # Password protection & permissions
│   └── url-to-pdf.md           # Convert web pages to PDF
│   └── watermarks.md           # Add text & image watermarks
│
├── api/
│   └── options.md              # All options
|
├── tutorials/*                 # Tutorials for react, svelte, vue & vanilla JS 
│
└── examples/
    ├── code-examples.md        # Code samples
    └── production-examples.md  # Real-world examples

---

Need Help?

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]

Contributing

We welcome contributions! Please open an issue or pull request on GitHub.

License

MIT License - see LICENSE.md for details.

---

Ready to get started? → Quick Start Guide