rm-ng-pdf-export

Export any HTML element to PDF with customizable settings!

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, 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.

• Why This Library
• Installation
• Quick Start / Usage
• API Reference
• Advanced Configuration
• Peer Dependencies
• Best Practices
• Performance Optimization
• Browser Support
• Versioning & Angular Compatibility
• Breaking Changes
• FAQ
• Troubleshooting
• Project Structure
• Contributing Guidelines
• Roadmap
• Changelog
• License
• Examples
• Usage Examples

Interactive Playground Try all features live in your browser	Complete Examples Copy-paste ready code samples
npm Registry Install and view package details	Source Code Star, fork, and contribute

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

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
      {
      provide: PDF_EXPORT_CONFIG,
      useValue: {
        pageSize: 'A4',
        orientation: 'portrait',
        filename: 'default.pdf',
        openInNewTab: false,
      } as PdfExportConfig,
    }
  ]
};

import { PdfExportService } from '@codewithrajat/rm-ng-pdf-export';

@Component({
  selector: 'app-example',
  template: `
    <div #content>
      <h1>Hello PDF!</h1>
      <p>This content will be exported to PDF</p>
    </div>
    <button (click)="exportPdf()">Export PDF</button>
  `
})
export class ExampleComponent {
  private readonly pdfService: PdfExportService  = inject(PdfExportService)
  content = viewChild<ElementRef<HTMLDivElement>>('content');

  exportPdf() {
    const contentEl = this.content()?.nativeElement;
    if (!contentEl) {
      return;
    }
    this.pdfService.exportHtml(contentEl, {
      filename: 'my-document.pdf',
      pageSize: 'A4',
      orientation: 'portrait'
    });
  }
}

• Ultra-High-Resolution Output: 3x html2canvas scaling + 4x canvas resolution
• Smart Page Breaking: Intelligent content boundary detection
• Multiple Page Sizes: A3, A4, A5, Letter, Legal, and more
• Portrait/Landscape: Dynamic orientation support
• Angular 14-21 Support: Compatible with modern Angular versions
• Tree-shakable: Optimized bundle size
• TypeScript: Full type safety
• Multiple APIs: Service, Directive, and Component approaches

Explore our comprehensive examples to see the library in action:

• Basic Usage - Simple PDF export
• Invoice Generator - Professional invoice template
• Dashboard Export - Charts and data visualization
• Certificate Generator - Interactive certificate creator
• Multi-page Documents - Large content with page breaks
• Advanced Usage - Batch export and custom configuration
• Best Practices - Error handling and performance

View All Examples →

For detailed installation instructions, see our Installation Guide.

For comprehensive usage examples and API documentation, see our Usage Guide.

See CHANGELOG.md for release history and updates.

Check the releases page for the most recent version and updates.

This project is licensed under the MIT License - see the LICENSE file for details.

TL;DR: You can use this library freely in commercial and personal projects.

You can:

• Use commercially
• Modify the code
• Distribute
• Use privately

You must:

• Include the license and copyright notice

You cannot:

• Hold the author liable

Q: What is rm-ng-pdf-export?

A: rm-ng-pdf-export is an Angular library that converts rendered HTML content into high-quality, non-editable PDF files using image-based rendering and smart page breaking.

Q: Which Angular versions are supported?

A: The library supports modern Angular versions, including Angular 14 through 22, with Ivy, AOT, SSR, and standalone-compatible APIs.

Q: Is the generated PDF editable or searchable?

A: No. This library creates image-based PDFs, so the output is read-only and non-editable. Use @codewithrajat/rm-ng-structure-pdf if you need structured, searchable, or editable PDFs.

Q: Can I export multiple pages?

A: Yes. The library supports multi-page PDF generation based on the target page size, orientation, margins, and content height.

Q: Can I customize page size and orientation?

A: Yes. You can choose common page sizes such as A3, A4, A5, Letter, and Legal, and switch between portrait and landscape orientations.

Q: Does it work with images, charts, and canvas content?

A: Yes. Most HTML content can be exported, including images, charts, and canvas-based visualizations. External images must be loaded correctly and follow browser CORS requirements.

Q: Why are some images or fonts missing in the PDF?

A: This usually happens when assets are not fully loaded before export or when external resources block browser rendering. Load images before exporting and ensure CORS is configured for remote assets.

Q: Can I export Angular forms?

A: Yes. You can export any rendered Angular template, including forms. Make sure the form state is finalized before calling the export method.

Q: Can I add headers, footers, or page numbers?

A: Yes, include them as part of the HTML content you export. For repeated headers or footers, create a layout inside the export target.

Q: How do I handle very large documents?

A: Large documents can increase export time and PDF size. Use lower scale values, reduce image sizes, split content into sections, or batch export pages when needed.

Q: Does it work on mobile browsers?

A: Yes, it works on modern mobile browsers. Performance depends on device memory, content size, and image resolution.

Q: Can I use this in commercial projects?

A: Yes. The library is MIT licensed and can be used in personal and commercial projects.

• iOS Safari 13+
• Chrome for Android 80+
• Samsung Internet
• All mobile browsers with modern JavaScript support

• Internet Explorer (all old versions)
• Very old mobile browsers (pre-2019)

If rm-ng-pdf-export has helped you build better Angular applications, please consider:

If this library has saved you development time and helped create amazing image sliders in your projects, please consider giving it a star!

Why star this repo?

• Help other developers discover this lightweight, optimized solution
• Support continued development and improvements
• Show appreciation for free, quality tools
• Boost visibility in the Angular community
• Increases visibility in the Angular community
• Supports ongoing development and maintenance
• Encourages more open-source contributions
• Helps other developers find quality tools

This is just one of several useful libraries I've created. Explore my other Angular & web development libraries that might solve your next challenge:

• Utility libraries for common development tasks
• UI components for better user experiences
• Performance tools for optimization
• Mobile-friendly solutions for responsive apps

Found them helpful? A star on each repo you find useful helps tremendously! It takes just one click but means the world to open-source maintainers.

Need assistance? We're here to help!

• GitHub Repository
• npm Package
• Live Demo
• Changelog

• Star the repository to show support
• Watch for updates and new releases
• Share your use cases and feedback
• Contribute code or documentation

• Follow the project on GitHub
• Star the repository for updates
• Watch for new releases

This library was created to provide a simple, effective solution for PDF export in Angular applications.

Special thanks to:

• Angular Team - Amazing framework and ecosystem
• html2canvas - Excellent HTML rendering library
• pdf-lib - Powerful PDF generation library
• Contributors - Thank you for making this library better
• Community - For feedback and feature requests

Library	Description	npm Link
rm-range-slider	Lightweight two-thumb range slider with tooltips and color customization
rm-ng-range-slider	Angular-specific version of the dual range slider
rm-carousel	Simple, responsive carousel component
rm-image-slider	Minimal image slider with smooth transitions
rm-ng-star-rating	Configurable Angular star rating component with readonly mode
@codewithrajat/rm-ng-typeahead	Angular autocomplete/typeahead component with search suggestions and keyboard navigation
@codewithrajat/rm-ng-editor	Rich text editor component for Angular applications with customizable toolbar support

Library	Description	npm Link
rm-ng-export-to-csv	Export JSON data to CSV with zero dependencies
@codewithrajat/rm-ng-pdf-export	Image-based PDF export tool for Angular applications
@codewithrajat/rm-ng-structure-pdf	Generate structured PDFs for reports, invoices, or documents
@codewithrajat/rm-ng-pdf-viewer	Angular PDF viewer component with zoom, navigation, and document rendering support

Library	Description	Link
quickocr	Chrome extension that extracts text from images using OCR technology
readLoude	Chrome extension that read you web page loude e.g article etc.
ai-assistant-reply	AI Chrome extension to auto generate reply on linked in posts.

Library	Description	Link
dead-css-cleaner	VS Code extension for identifying and cleaning unused CSS styles
file-coverage-insight	VS Code extension for auto generated component file coverage automatelly on open.

Library	Description	Link
deepwork	Cross-platform productivity application for focus sessions and deep work tracking
JsSandbox	Cross-platform JavaScript playground and code execution environment

Library	Description	npm Link
rm-ng-device-detection	Detect device type, OS, and browser in Angular

Library	Description	npm Link
rm-pushnotify	Lightweight push-style toast notification utility
@codewithrajat/rm-toast-notification	Cross-platform toast and desktop notification library for web, Angular, and desktop applications

Library	Description	Link
rm-ng-dynamic-layout	Dynamic layout rendering engine for Angular applications using JSON-driven UI configuration

Library	Description	Link
rm-colorful-console-logger	Structured and colorized console logging utility for developers

Library	Description	npm Link
about-rajat	Developer portfolio package for branding and quick personal info

Browse all my packages:

• npm: @codewithrajat
• npm: rajatmalik
• GitHub: @malikrajat

Rajat Malik

Full‑Stack Developer and Frontend Architect at Siemens with 14+ years building scalable enterprise platforms, specializing in micro‑frontends, AI‑native development, React, and Angular.
Author of 10+ open‑source libraries and 100+ technical articles, driving innovation through developer‑friendly tools, performance optimization, and AI‑assisted workflows.

• Portfolio: rajatmalik.dev
• Email: mr.rajatmalik@gmail.com
• LinkedIn: errajatmalik
• GitHub: @malikrajat
• npm: rajatmalik

• Threads: rajatmalik
• Twitter/X: rajatmalik
• BlueSky: rajatmalik

• Medium: rajatmalik
• Dev.to: rajatmalik
• Substack: rajatmalik
• Hashnode: rajatmalik

Made with care and love by Rajat Malik for the Angular community

Star on GitHub • View on npm • Report Issue • Try Demo

Made with dedication by Rajat Malik