@codewithrajat/rm-ng-pdf-export

rm-ng-pdf-export

@codewithrajat/rm-ng-pdf-export is a lightweight, flexible, and tree-shakable Angular library for generating and exporting ultra-high-quality PDFs from HTML content with smart page breaking and crystal-clear rendering. Built with modern Angular (v14–v20), it seamlessly integrates with your application using services, directives, and components.

Note:

This library is intended for generating non-editable, read-only PDFs.

If you need to create structured, searchable, and editable PDFs, please use our other library: @codewithrajat/rm-ng-structure-pdf.

✅ Solves

• Client-side PDF generation without backend dependency
• Export HTML content (tables, charts, dynamic data) to PDF with professional page breaks
• Ultra-High-Resolution PDF output - crystal-clear text and images (3x scaling + 4x canvas resolution)
• Print-Quality Rendering - 300 DPI output suitable for professional printing
• Superior Image Quality - razor-sharp graphics, fonts, and visual elements
• Highly customizable output (metadata, layout, styles, page sizing)
• Smart content preservation - prevents cutting cards, images, and sections mid-way

👤 Ideal For

• Angular developers building reporting tools, dashboards, or invoice systems
• Applications requiring professional PDF export with clean page transitions
• Teams needing ultra-high-quality PDF output for presentations and reports
• Businesses requiring print-ready PDFs with crystal-clear text and graphics

🚀 Features

• ✅ HTML to PDF rendering using html2canvas and pdf-lib
• ✅ Ultra-High-Resolution Output: 3x html2canvas scaling + 4x canvas resolution for crystal-clear PDFs
• ✅ Print-Quality Rendering: 300 DPI output suitable for professional printing
• ✅ Superior Image Quality: Advanced image smoothing for razor-sharp graphics and text
• ✅ Smart Page Breaking: Intelligent content boundary detection for professional page transitions
• ✅ CSS Page-Break Support: Respects page-break-before, page-break-after, and page-break-inside properties
• ✅ Configurable Page Sizes: A3, A4, A5, Letter, Legal, Tabloid, Ledger, Executive, B4, B5
• ✅ Portrait and Landscape Orientations: Dynamic orientation support
• ✅ Multi-page PDF Generation: Automatic page breaks for large content
• ✅ Content Preservation: Cards, sections, and visual elements remain intact across pages
• ✅ Standalone and module-based Angular support
• ✅ Custom filename, metadata, and export options
• ✅ Tree-shakable and side-effect-free
• ✅ Supports Angular v14 to v20 (Ivy and standalone)
• ✅ API via Service, Directive ([rmPdfExport]), or Component (<rm-pdf-export>)
• ✅ Download or open in new tab
• ✅ Optional support for charts, tables, and images
• ✅ Platform-safe (browser check using isPlatformBrowser)
• ✅ Peer dependency friendly and compatible with lazy loading

🖼️ Live Demo

See the implementation here

📦 Installation Instructions

Install via npm:

  npm install @codewithrajat/rm-ng-pdf-export

📋 Peer Dependencies

Library	Version
@angular/core	^14.0.0–^20.0.0
pdf-lib	^1.17.1
html2canvas	^1.4.1

Install missing dependencies if needed:

  npm install pdf-lib html2canvas

🧭 Compatibility Matrix

Angular Version	Compatible	Standalone Support
14	✅	❌ (partial)
15	✅	✅
16	✅	✅
17	✅	✅
18–20	✅	✅

The library follows the Angular Package Format (APF) and supports both ViewEngine and Ivy compilation.

🧪 Usage

✅ Basic Setup

Import providers in main.ts :

  // in case of adding in root
  import { bootstrapApplication } from '@angular/platform-browser';
  import { AppComponent } from './app/app.component';
  import { PdfExportService, PDF_EXPORT_CONFIG } from '@codewithrajat/rm-ng-pdf-export';
  
  bootstrapApplication(AppComponent, {
    providers: [
      PdfExportService,
      {
        provide: PDF_EXPORT_CONFIG,
        useValue: {
          filename: 'export.pdf',
          orientation: 'portrait',
          openInNewTab: false
        }
      }
    ]
  });

Import providers in component.ts (if using standalone and do not want to import globally like main.ts):

  // in case of adding in component 
  import { Component, ElementRef, ViewChild } from '@angular/core';
  import { PdfExportService, PDF_EXPORT_CONFIG } from '@codewithrajat/rm-ng-pdf-export';
  
  @Component({
    selector: 'app-report',
    standalone: true,
    templateUrl: './report.component.html',
    styleUrls: ['./report.component.scss'],
    providers: [
      PdfExportService,
      {
        provide: PDF_EXPORT_CONFIG,
        useValue: {
          filename: 'report.pdf',
          orientation: 'landscape',
          openInNewTab: true
        }
      }
    ]
  })
  export class ReportComponent {
    constructor(private pdfExport: PdfExportService) {}
    
    @ViewChild('pdfContent') contentRef!: ElementRef;
  
    export() {
      this.pdfExport.exportHtml(this.contentRef.nativeElement, { filename: 'one.pdf' });
    }
  }

Use in component:

  <div #pdfContent>
    <h1>Invoice</h1>
    <p>Product list, totals, etc.</p>
  </div>
  
  <button (click)="export()">Export PDF</button>

  @ViewChild('pdfContent') contentRef!: ElementRef;
  
  constructor(private pdfService: PdfExportService) {}
  
  export() {
    this.pdfService.exportHtml(this.contentRef.nativeElement, { filename: 'one.pdf' });
  }

✅ Declarative Directive

  <div #pdfContent>Invoice body here</div>
  
  <button
    rmPdfExport
    [pdfConfig]="{ filename: 'invoice.pdf' }"
    [exportTarget]="pdfContent">
    Export as PDF
  </button>

⚙️ Advanced Configuration

Option	Description
filename	Custom filename for the download
orientation	'portrait' or 'landscape'
pageSize	'A4', 'LETTER', 'LEGAL', etc.
metadata.title	Sets the PDF document title
metadata.author	Sets author info
openInNewTab	true opens PDF in a new tab instead of download

Example:

  {
    filename: 'summary.pdf',
    orientation: 'landscape',
    metadata: {
      title: 'Sales Summary',
      author: 'Analytics Team'
    },
    openInNewTab: true
  }

📘 API Reference

PdfExportService

    exportHtml(element: HTMLElement, overrideConfig?: PdfExportConfig): Promise<void>;

PDF_EXPORT_CONFIG

An InjectionToken<PdfExportConfig> for global config defaults.

🌳 Tree-Shaking and Optimization

• The library is marked as sideEffects: false in package.json
• All internal modules and services are tree-shakable
• Lazy-load friendly and safe for modern Angular SSR setups
• Avoids loading pdf-lib or html2canvas until explicitly needed

⚠️ Known Issues & Limitations

• html2canvas does not support modern CSS functions like oklch() or color()
• Use PostCSS to convert or sanitize styles
• Large DOMs may consume high memory for rendering
• Dynamic SVG/Canvas may need rasterization before export

🛠 Development Setup (for contributors)

  git clone https://github.com/malikrajat/@codewithrajat/rm-ng-pdf-export.git
  cd rm-ng-pdf-export
  npm install

Scripts

Command	Description
npm run build	Builds the library using ng-packagr
npm run test	Runs unit tests with Jest
npm run lint	Lints the codebase

Folder Structure

  projects/
    rm-ng-pdf-export/
      src/
        lib/
          directives/
          services/
          tokens/
          components/
        public-api.ts
      ng-package.json

📦 Release Notes / Changelog

See CHANGELOG.md for detailed version history.

📄 License

This project is licensed under the MIT License.

👤 Author / Maintainer Info

Rajat Malik Frontend Developer | Open Source Contributor

📧 Email
🌐 Website
🤝 Contact

🙏 Credits & Acknowledgements

• pdf-lib — Low-level PDF generation
• html2canvas — DOM to Canvas rendering
• Angular team for powerful tooling and open source support

Built with ❤️ for the Angular community.