API Reference

July 10, 2026 · View on GitHub

Complete API documentation for rm-ng-pdf-export library.

Core Service

PdfExportService

The main service for PDF export functionality.

Methods

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

Exports an HTML element to PDF.

Parameters:

  • element (HTMLElement): The DOM element to export
  • config (PdfExportConfig, optional): Configuration options

Returns: Promise

Example:

await this.pdfService.exportHtml(this.contentRef.nativeElement, {
  filename: 'my-document.pdf',
  pageSize: 'A4',
  orientation: 'portrait'
});
getAvailablePageSizes(): string[]

Returns an array of supported page sizes.

Returns: string[] - Array of page size names

Example:

const sizes = this.pdfService.getAvailablePageSizes();
// Returns: ['A3', 'A4', 'A5', 'Letter', 'Legal', 'Tabloid', 'Ledger', 'Executive', 'B4', 'B5']

🎛Configuration

PdfExportConfig Interface

Configuration options for PDF export.

interface PdfExportConfig {
  pageSize?: PageSize;
  orientation?: PageOrientation;
  filename?: string;
  metadata?: PdfMetadata;
  openInNewTab?: boolean;
}

Properties

PropertyTypeDefaultDescription
pageSizePageSize'A4'Page size for the PDF
orientationPageOrientation'portrait'Page orientation
filenamestring'document.pdf'Filename for download
metadataPdfMetadataundefinedPDF metadata
openInNewTabbooleanfalseOpen PDF in new tab instead of download

PageSize Type

Supported page sizes:

type PageSize = 
  | 'A3' 
  | 'A4' 
  | 'A5' 
  | 'Letter' 
  | 'Legal' 
  | 'Tabloid' 
  | 'Ledger' 
  | 'Executive' 
  | 'B4' 
  | 'B5';

Page Size Dimensions

SizePortrait (mm)Landscape (mm)Portrait (in)Landscape (in)
A3297 × 420420 × 29711.7 × 16.516.5 × 11.7
A4210 × 297297 × 2108.3 × 11.711.7 × 8.3
A5148 × 210210 × 1485.8 × 8.38.3 × 5.8
Letter216 × 279279 × 2168.5 × 11.011.0 × 8.5
Legal216 × 356356 × 2168.5 × 14.014.0 × 8.5
Tabloid279 × 432432 × 27911.0 × 17.017.0 × 11.0
Ledger432 × 279279 × 43217.0 × 11.011.0 × 17.0
Executive184 × 267267 × 1847.25 × 10.510.5 × 7.25
B4250 × 353353 × 2509.8 × 13.913.9 × 9.8
B5176 × 250250 × 1766.9 × 9.89.8 × 6.9

PageOrientation Type

type PageOrientation = 'portrait' | 'landscape';

PdfMetadata Interface

Metadata information for the PDF document.

interface PdfMetadata {
  title?: string;
  author?: string;
  subject?: string;
  keywords?: string;
  creator?: string;
  producer?: string;
}

Properties

PropertyTypeDescription
titlestringDocument title
authorstringDocument author
subjectstringDocument subject
keywordsstringDocument keywords
creatorstringApplication that created the document
producerstringApplication that produced the PDF

Directive API

rmPdfExport Directive

Declarative directive for PDF export functionality.

Selector

[rmPdfExport]

Properties

InputTypeDescription
pdfConfigPdfExportConfigComplete configuration object
pageSizePageSizePage size (alternative to pdfConfig)
orientationPageOrientationOrientation (alternative to pdfConfig)
filenamestringFilename (alternative to pdfConfig)
exportTargetElementRefTarget element to export

Usage Examples

With configuration object:

<button 
  rmPdfExport
  [pdfConfig]="{ pageSize: 'A4', orientation: 'portrait', filename: 'report.pdf' }"
  [exportTarget]="contentRef">
  Export PDF
</button>

With individual properties:

<button 
  rmPdfExport
  [pageSize]="'Letter'"
  [orientation]="'landscape'"
  [filename]="'document.pdf'"
  [exportTarget]="contentRef">
  Export PDF
</button>

Component API

rm-pdf-export Component

Wrapper component for PDF export functionality.

Selector

<rm-pdf-export>

Properties

InputTypeDescription
pdfConfigPdfExportConfigComplete configuration object
pageSizePageSizePage size
orientationPageOrientationPage orientation
filenamestringExport filename
openInNewTabbooleanOpen in new tab

Content Projection

The component uses content projection to wrap the content to be exported:

<rm-pdf-export [pageSize]="'A4'" [filename]="'my-document.pdf'">
  <div>
    <!-- Content to be exported -->
    <h1>Document Title</h1>
    <p>Document content...</p>
  </div>
</rm-pdf-export>

Injection Tokens

PDF_EXPORT_CONFIG

Injection token for global PDF export configuration.

import { PDF_EXPORT_CONFIG, PdfExportConfig } from 'rm-ng-pdf-export';

const defaultConfig: PdfExportConfig = {
  pageSize: 'A4',
  orientation: 'portrait',
  filename: 'document.pdf',
  openInNewTab: false
};

// In providers array
{
  provide: PDF_EXPORT_CONFIG,
  useValue: defaultConfig
}

CSS Classes for Page Breaking

The library recognizes specific CSS classes for intelligent page breaking:

Recognized Classes

ClassPurposeBehavior
.pdf-sectionMajor content sectionsPreferred break points
.content-blockLarge content areasAvoid breaking inside
.blog-cardArticle cardsKeep intact
.feature-cardFeature cardsPrevent mid-card breaks
.stat-cardStatistics cardsMaintain visual integrity

CSS Page-Break Properties

Standard CSS page-break properties are supported:

/* Prevent breaking inside element */
.important-content {
  page-break-inside: avoid;
}

/* Force break before element */
.new-section {
  page-break-before: always;
}

/* Avoid break after element */
.section-header {
  page-break-after: avoid;
}

/* Allow automatic breaking */
.flexible-content {
  page-break-before: auto;
  page-break-after: auto;
}

Error Handling

Common Error Types

The service may throw these types of errors:

Canvas Rendering Errors

try {
  await this.pdfService.exportHtml(element);
} catch (error) {
  if (error.message.includes('html2canvas')) {
    console.error('Canvas rendering failed:', error);
    // Handle canvas-specific errors
  }
}

PDF Generation Errors

try {
  await this.pdfService.exportHtml(element);
} catch (error) {
  if (error.message.includes('pdf-lib')) {
    console.error('PDF generation failed:', error);
    // Handle PDF-specific errors
  }
}

Browser Compatibility Errors

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

constructor(
  private pdfService: PdfExportService,
  @Inject(PLATFORM_ID) private platformId: Object
) {}

exportPdf() {
  if (!isPlatformBrowser(this.platformId)) {
    console.warn('PDF export is only available in browser environment');
    return;
  }
  
  // Proceed with export
  this.pdfService.exportHtml(element);
}

Advanced Usage

Custom Configuration Factory

import { InjectionToken } from '@angular/core';

export function createPdfConfig(): PdfExportConfig {
  return {
    pageSize: window.innerWidth > 1200 ? 'A3' : 'A4',
    orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait',
    filename: `export-${new Date().toISOString().split('T')[0]}.pdf`
  };
}

// In providers
{
  provide: PDF_EXPORT_CONFIG,
  useFactory: createPdfConfig
}

Service Extension

import { Injectable } from '@angular/core';
import { PdfExportService, PdfExportConfig } from 'rm-ng-pdf-export';

@Injectable()
export class CustomPdfService extends PdfExportService {
  
  async exportWithWatermark(element: HTMLElement, watermarkText: string) {
    // Add watermark logic
    const watermarkElement = this.createWatermark(watermarkText);
    element.appendChild(watermarkElement);
    
    try {
      await this.exportHtml(element);
    } finally {
      // Clean up watermark
      element.removeChild(watermarkElement);
    }
  }
  
  private createWatermark(text: string): HTMLElement {
    const watermark = document.createElement('div');
    watermark.textContent = text;
    watermark.style.cssText = `
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      font-size: 48px;
      color: rgba(0,0,0,0.1);
      pointer-events: none;
      z-index: 1000;
    `;
    return watermark;
  }
}

Support

For API-related questions: