rm-ng-pdf-export

July 12, 2026 · View on GitHub

npm version total downloads Last update Open issues GitHub stars

See It In Action

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.

Live Demo & Playground

_{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}

Quick Start

Installation

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

Basic Usage

main.ts Configuration

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,
    }
  ]
};

Set up component

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'
    });
  }
}

Features

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

Live Examples

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 →

Installation & Setup

For detailed installation instructions, see our Installation Guide.

Usage

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

Changelog

See CHANGELOG.md for release history and updates.

Latest Release

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

License

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.

MIT License Summary

You can:

Use commercially
Modify the code
Distribute
Use privately

You must:

Include the license and copyright notice

You cannot:

Hold the author liable

FAQ

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.

Browser Compatibility

Supported Browsers

Browser	Version	Support Level	Notes
Chrome	80+	Full Support	Recommended browser
Firefox	75+	Full Support	Works perfectly
Safari	13+	Full Support	iOS and macOS
Edge	80+	Full Support	Chromium-based
Opera	67+	Full Support	Works well
Samsung Internet	12+	Full Support	Mobile support

Mobile Support

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

Download Behavior by Platform

Platform	Behavior
Desktop Chrome/Firefox/Edge	Direct download to Downloads folder
Desktop Safari	May prompt for download location
iOS Safari	Opens download manager
Android Chrome	Downloads to Downloads folder
Mobile Safari	Shows share sheet with save option

Not Supported

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

Statistics

Support This Project

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

Want More Quality Libraries?

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.

Support and Community

Getting Help

Need assistance? We're here to help!

Support Channel	Link	Best For
Bug Reports	Report Bug	Technical issues
Feature Requests	Request Feature	New features
Discussions	Join Discussion	General questions
Email	mr.rajatmalik@gmail.com	Direct support

Documentation

Community

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

Stay Updated

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

Acknowledgements

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

Other Libraries

UI Components

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

PDF & Export Libraries

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

Chrome Extension

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.

VS Code Extension

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.

Desktop Applications - All Plateform

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

Device Detection

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

Notifications

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

Layout & Dynamic Rendering

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

Developer Tools & Extensions

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

Meta & Personal Branding

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

All Packages

Browse all my packages:

Author

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.

GET IN TOUCH

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

Threads: rajatmalik
Twitter/X: rajatmalik
BlueSky: rajatmalik

CONTENT & WRITING

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