The most reliable, feature-rich Angular PDF viewer component powered by Mozilla's PDF.js

ng2-pdfjs-viewer is the most comprehensive and feature-rich Angular PDF viewer component available. Born in 2018 and still going strong with over 7+ million downloads, this battle-tested library has been trusted by developers worldwide for over 8 years, powering thousands of applications.

This powerful library enables developers to seamlessly integrate PDF viewing capabilities into Angular applications with enterprise-grade features, custom theming, and mobile-first responsive design. Built on Mozilla's PDF.js v5.3.93, ng2-pdfjs-viewer provides advanced PDF rendering, document navigation, search functionality, and extensive customization options.

Whether you need a simple embedded PDF viewer or a complex document management system, this component delivers the performance and flexibility required for modern Angular applications. The most mature and reliable Angular PDF viewer solution with continuous updates and long-term support.

• 🚀 Always Up-to-Date - Continuously updated with the latest PDF.js versions and Angular compatibility
• 🏗️ Enterprise-Ready - Built for production with comprehensive error handling and performance optimization
• 🎨 Highly Customizable - Extensive theming options, custom templates, and flexible configuration
• 📱 Mobile Optimized - Touch-friendly interface with responsive design for all screen sizes
• 🔧 Developer Friendly - Full TypeScript support, comprehensive documentation, and easy integration
• ⚡ High Performance - Event-driven architecture with efficient memory management and lazy loading
• 🌍 Global Support - Multi-language support with automatic locale detection and RTL compatibility
• 🛡️ Production Tested - Trusted by thousands of applications with millions of downloads
• 📈 Proven Track Record - 8+ years of continuous development and community support
• 🔒 Security Focused - Regular security updates and vulnerability patches

• Universal Action Dispatcher - Single pathway for all actions with readiness validation
• Template-Based Customization - Use Angular templates for loading and error states
• Comprehensive Event System - 24+ events covering all user interactions and state changes
• Advanced Configuration Objects - Clean, object-based configuration for complex setups
• Production-Ready Architecture - Event-driven design with no timeouts or polling
• Complete API Coverage - 19+ methods with consistent Promise-based returns

• Enterprise Applications - Robust, scalable PDF viewing for business applications
• Document Management Systems - Complete PDF handling with search and navigation
• E-Learning Platforms - Interactive PDF viewing for educational content
• Financial Applications - Secure PDF viewing for reports and statements
• Healthcare Systems - Reliable PDF viewing for medical documents
• Government Portals - Accessible PDF viewing for public services
• E-Commerce Platforms - Product catalogs and documentation viewing
• Content Management Systems - Integrated PDF viewing and management

• Quick Start
• Features
• Installation
• Basic Usage
• Advanced Configuration
• API Reference
• Examples
• Migration Guide
• Deprecated Features
• Contributing
• License

🎯 Live Demo: https://angular-pdf-viewer-demo.vercel.app/
📚 Documentation: https://angular-pdf-viewer-docs.vercel.app/
📁 Source Code: https://github.com/intbot/ng2-pdfjs-viewer/tree/main/SampleApp

npm install ng2-pdfjs-viewer --save

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { PdfJsViewerModule } from "ng2-pdfjs-viewer";
@NgModule({
 imports: [BrowserModule, PdfJsViewerModule],
 // ... rest of your module
})
export class AppModule {}

<ng2-pdfjs-viewer
 pdfSrc="assets/sample.pdf"
 [showSpinner]="true"
 [theme]="'light'"
>
</ng2-pdfjs-viewer>

Add PDF.js assets to your angular.json:

{
 "projects": {
 "your-app": {
 "architect": {
 "build": {
 "options": {
"assets": [
 {
 "glob": "**/*",
 "input": "node_modules/ng2-pdfjs-viewer/pdfjs",
 "output": "/assets/pdfjs"
 }
 ]
 }
 }
 }
 }
 }
}

🎉 7+ Million Downloads & Counting! - Trusted by developers worldwide for reliable PDF viewing in Angular applications since 2018.

• 📄 High-Quality PDF Rendering - Powered by Mozilla's PDF.js v5.3.93 for superior document display
• 🔄 Multiple Display Modes - Embedded viewer, new window, or external tab options
• 📱 Mobile-First Responsive Design - Touch-friendly controls optimized for all devices
• 🌍 Complete Internationalization - Support for 50+ languages with automatic locale detection
• ⚡ Optimized Performance - Lazy loading, memory management, and efficient rendering

• 🎨 Theme System - Light, dark, and auto themes with custom color schemes
• 🎭 Custom Styling - CSS custom properties for complete visual control
• 🔄 Loading States - Custom loading spinners with template support
• ❌ Error Handling - Multiple error display styles with custom templates
• 📐 Layout Control - Toolbar density, sidebar width, and positioning options

• 📝 TypeScript Support - Full type safety with strict mode
• 🔌 Event System - Comprehensive event handling for all user interactions
• ⚙️ Configuration Objects - Convenience setters for cleaner code
• 🛠️ API Methods - Promise-based methods for programmatic control
• 🐛 Debugging - Built-in diagnostic logging and error tracking

• 🔍 Search & Navigation - Full-text search with highlighting
• 📖 Bookmarks & Attachments - Document structure navigation
• 🖨️ Print & Download - Built-in print and download functionality
• 🔄 Rotation & Zoom - Document manipulation with smooth animations
• 📱 Touch Gestures - Mobile-optimized touch interactions

• CSP Compliant - Works with strict Content Security Policy (style-src 'self')
• URL Validation - Prevents unauthorized file parameter manipulation in external viewer
• Custom Security Templates - Angular template support for security warnings
• Console Warnings - Developer-friendly security notifications

• Angular: 20.0+ (recommended) | 2.0+ (supported)
• Node.js: 18.0+
• TypeScript: 5.0+

For production deployments using nginx, configure MIME types for PDF.js ES modules:

# Add to your nginx.conf or site configuration
types {
 application/javascript js mjs;
 text/plain ftl;
}

For production deployments using IIS, add to your web.config:

<configuration>
 <system.webServer>
 <staticContent>
 <mimeMap fileExtension=".mjs" mimeType="application/javascript" />
 <mimeMap fileExtension=".ftl" mimeType="text/plain" />
 </staticContent>
 </system.webServer>
</configuration>

Why this is needed: PDF.js v5+ uses .mjs files (ES modules) and .ftl files (localization). Without proper MIME type configuration, web servers serve these files with incorrect content-type headers, causing the PDF viewer to crash during loading in production environments.

Note: While the library supports Angular 2.0+, it's primarily tested and optimized for Angular 20+. For production use with older versions, thorough testing is recommended. The library uses relaxed peer dependencies (Angular >=10.0.0) to ensure compatibility across different Angular versions.

# Using npm
npm install ng2-pdfjs-viewer --save
# Using yarn
yarn add ng2-pdfjs-viewer
# Using pnpm
pnpm add ng2-pdfjs-viewer

Add PDF.js assets to your angular.json:

{
 "projects": {
 "your-app": {
 "architect": {
 "build": {
 "options": {
 "assets": [
 {
 "glob": "**/*",
 "input": "node_modules/ng2-pdfjs-viewer/pdfjs",
 "output": "/assets/pdfjs"
 }
 ]
 }
 }
 }
 }
 }
}

<ng2-pdfjs-viewer pdfSrc="assets/document.pdf" [showSpinner]="true">
</ng2-pdfjs-viewer>

<ng2-pdfjs-viewer
 pdfSrc="assets/document.pdf"
 [theme]="'dark'"
 [primaryColor]="'#007acc'"
 [showSpinner]="true"
 [customSpinnerTpl]="customSpinner"
 [customErrorTpl]="customError"
 (onDocumentLoad)="onDocumentLoaded($event)"
 (onPageChange)="onPageChanged($event)"
>
</ng2-pdfjs-viewer>

<!-- Basic security (default enabled) -->
<ng2-pdfjs-viewer 
 pdfSrc="assets/document.pdf"
 [urlValidation]="true">
</ng2-pdfjs-viewer>
<!-- Custom security template -->
<ng2-pdfjs-viewer 
 pdfSrc="assets/document.pdf"
 [urlValidation]="true"
 [customSecurityTpl]="securityTemplate">
</ng2-pdfjs-viewer>
<ng-template #securityTemplate let-warning="securityWarning">
 <div class="alert alert-warning" *ngIf="warning">
 <h4>⚠️ Security Warning</h4>
 <p>{{ warning.message }}</p>
 <button (click)="pdfViewer.dismissSecurityWarning()">Dismiss</button>
 </div>
</ng-template>

import { Component, ViewChild } from "@angular/core";
import { PdfJsViewerComponent } from "ng2-pdfjs-viewer";
@Component({
 template: `
 <ng2-pdfjs-viewer #pdfViewer pdfSrc="document.pdf"></ng2-pdfjs-viewer>
 <button (click)="goToPage(5)">Go to Page 5</button>
 `,
})
export class MyComponent {
 @ViewChild("pdfViewer") pdfViewer!: PdfJsViewerComponent;
 async goToPage(page: number) {
 await this.pdfViewer.goToPage(page);
 }
}

// Component
export class MyComponent {
 themeConfig = {
 theme: "light",
 primaryColor: "#007acc",
 backgroundColor: "#ffffff",
 toolbarColor: "#f5f5f5",
 textColor: "#333333",
 borderRadius: "8px",
 };
}

<!-- Template -->
<ng2-pdfjs-viewer [themeConfig]="themeConfig" [customCSS]="customStyles">
</ng2-pdfjs-viewer>

<ng-template #customSpinner>
 <div class="custom-spinner">
 <div class="spinner"></div>
 <p>Loading PDF...</p>
 </div>
</ng-template>
<ng2-pdfjs-viewer
 [customSpinnerTpl]="customSpinner"
 [spinnerClass]="'my-spinner'"
>
</ng2-pdfjs-viewer>

<ng-template #customError>
 <div class="error-container">
 <mat-icon>error</mat-icon>
 <h3>Failed to Load PDF</h3>
 <p>Please check your internet connection and try again.</p>
 <button mat-button (click)="retry()">Retry</button>
 </div>
</ng-template>
<ng2-pdfjs-viewer [customErrorTpl]="customError" [errorClass]="'my-error'">
</ng2-pdfjs-viewer>

<!-- Basic external window (reuses same tab) -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf"
 [externalWindow]="true">
</ng2-pdfjs-viewer>
<!-- Custom window options -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf"
 [externalWindow]="true"
 [externalWindowOptions]="'width=1200,height=800,scrollbars=yes,resizable=yes'">
</ng2-pdfjs-viewer>
<!-- Force new tab each time -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf"
 [externalWindow]="true"
 [target]="'pdf-viewer-' + Date.now()">
</ng2-pdfjs-viewer>

Tab Reuse Behavior:

• Same target name → Reuses existing tab (default behavior)
• Unique target name → Always opens new tab
• target="_blank" → Browser decides (usually reuses)

<!-- Built-in security (always enabled) -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf">
</ng2-pdfjs-viewer>

Built-in Security Features:

• Static Sandbox - allow-forms allow-scripts allow-same-origin allow-modals
• XSS Prevention - Prevents malicious scripts from affecting parent page
• CSP Compliance - Meets Content Security Policy requirements
• Data Protection - Limits iframe access to parent window context
• Enterprise Ready - Suitable for corporate security environments

Sandbox Attributes (Fixed for Security):

• allow-forms - Required for PDF form functionality
• allow-scripts - Required for PDF.js JavaScript execution
• allow-same-origin - Required for loading PDF files and assets
• allow-modals - Required for PDF.js dialogs (print, download)

<!-- Default (no border) -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf">
</ng2-pdfjs-viewer>
<!-- Custom border -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf"
 iframeBorder="2px solid #ccc">
</ng2-pdfjs-viewer>
<!-- Numeric border -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf"
 [iframeBorder]="1">
</ng2-pdfjs-viewer>
<!-- No border (explicit) -->
<ng2-pdfjs-viewer 
 pdfSrc="document.pdf"
 iframeBorder="0">
</ng2-pdfjs-viewer>

🎯 Live Demo: https://angular-pdf-viewer-demo.vercel.app/
📚 Documentation: https://angular-pdf-viewer-docs.vercel.app/
📁 Source Code: https://github.com/intbot/ng2-pdfjs-viewer/tree/main/SampleApp

<ng2-pdfjs-viewer pdfSrc="assets/sample.pdf" [showSpinner]="true">
</ng2-pdfjs-viewer>

<ng2-pdfjs-viewer
 pdfSrc="assets/sample.pdf"
 [theme]="'dark'"
 [primaryColor]="'#ff6b6b'"
 [backgroundColor]="'#2c3e50'"
>
</ng2-pdfjs-viewer>

<ng-template #loadingTemplate>
 <div class="loading">
 <mat-spinner></mat-spinner>
 <p>Loading your document...</p>
</div>
</ng-template>
<ng-template #errorTemplate>
 <div class="error">
 <mat-icon>error_outline</mat-icon>
 <h3>Oops! Something went wrong</h3>
 <p>We couldn't load your PDF. Please try again.</p>
 <button mat-button (click)="retry()">Retry</button>
</div>
</ng-template>
<ng2-pdfjs-viewer
 pdfSrc="assets/sample.pdf"
 [customSpinnerTpl]="loadingTemplate"
 [customErrorTpl]="errorTemplate"
>
 </ng2-pdfjs-viewer>

export class PdfController {
 // Group visibility configuration
 groupVisibility = {
 "download": true,
 "print": true,
 "find": true,
 "fullScreen": true,
 "openFile": true,
 "viewBookmark": true,
 "annotations": false
 };
 // Auto actions configuration
 autoActions = {
 "downloadOnLoad": false,
 "printOnLoad": false
 };
 // Control visibility configuration
 controlVisibility = {
 "showToolbarLeft": true,
 "showToolbarMiddle": true,
 "showToolbarRight": true,
 "showSecondaryToolbarToggle": true,
 "showSidebar": true,
 "showSidebarLeft": true,
 "showSidebarRight": true
 };
}

<ng2-pdfjs-viewer
 pdfSrc="assets/sample.pdf"
 [groupVisibility]="groupVisibility"
 [autoActions]="autoActions"
 [controlVisibility]="controlVisibility"
>
</ng2-pdfjs-viewer>

export class PdfController {
 @ViewChild("pdfViewer") pdfViewer!: PdfJsViewerComponent;
 async loadDocument(url: string) {
 this.pdfViewer.pdfSrc = url;
 await this.pdfViewer.refresh();
 }
 async goToPage(page: number) {
 await this.pdfViewer.goToPage(page);
 }
 async setZoom(zoom: string) {
 await this.pdfViewer.setZoom(zoom);
 }
}

For server-side developers, we provide comprehensive examples for integrating PDF APIs with ng2-pdfjs-viewer:

📋 Server-Side Examples - Complete examples for:

• ASP.NET Core (C#) - RDLC reports, physical files, iTextSharp
• Node.js (Express) - File serving, PDFKit, Puppeteer
• Python (FastAPI) - ReportLab, WeasyPrint, file handling
• Java (Spring Boot) - iText, JasperReports, file serving
• PHP (Laravel) - TCPDF, DomPDF, file management
• Go (Gin) - gofpdf, file serving, PDF generation

Each example includes proper Content-Type headers, error handling, CORS configuration, and Angular integration patterns.

1. PDF.js Upgrade: Updated to v5.3.93 - some APIs may have changed
2. Theme System: New theme properties replace old styling options
3. Error Handling: Template-based error system replaces HTML strings

1. Update Dependencies

   npm install ng2-pdfjs-viewer@latest

2. Update Theme Configuration

   // Old way
   [customCSS]="'body { background: red; }'"
   // New way
   [theme]="'light'"
   [primaryColor]="'#ff0000'"
   [backgroundColor]="'#ffffff'"

3. Update Error Handling

   <!-- Old way -->
   [errorHtml]="'<div>Custom error</div>'"
   <!-- New way -->
   <ng-template #errorTemplate>
    <div>Custom error</div>
   </ng-template>
   <ng2-pdfjs-viewer [customErrorTpl]="errorTemplate"></ng2-pdfjs-viewer>

4. Update Spinner Handling

   <!-- Old way -->
   [spinnerHtml]="'<div class=\"spinner\">Loading...</div>'"
   <!-- New way -->
   <ng-template #spinnerTemplate>
    <div class="spinner">Loading...</div>
   </ng-template>
   <ng2-pdfjs-viewer [customSpinnerTpl]="spinnerTemplate"></ng2-pdfjs-viewer>

   // Old way
   this.pdfViewer.setSpinnerHtml('<div>Loading...</div>');
   // New way
   // Use [customSpinnerTpl] with ng-template

The following features are deprecated and will be removed in future versions:

// Deprecated - Error Handling
this.pdfViewer.setErrorHtml("<div>Error</div>");
// New way - Error Handling
// Use [customErrorTpl] with ng-template
// Deprecated - Spinner Handling
this.pdfViewer.setSpinnerHtml("<div>Loading...</div>");
// New way - Spinner Handling
// Use [customSpinnerTpl] with ng-template

• Custom CSS Examples - Complete styling guide with theme customization examples
• Error Display Examples - Custom error template examples and styling options
• Contributing Guide - How to contribute to the project

We welcome contributions! Please see our Contributing Guide for details.

# Clone the repository
git clone https://github.com/intbot/ng2-pdfjs-viewer.git
# Clear Angular cache (Windows)
Remove-Item -Recurse -Force "SampleApp\.angular"
# Build and test - All at once (Windows)
@test.bat

This project is licensed under the Apache License 2.0 + Commons Clause License Condition v1.0 - see the LICENSE file for details.

• Community Contributors - For bug reports, feature requests, and contributions
• 7+ Million Users - For trusting us with your PDF viewing needs
• Mozilla PDF.js Team - For the amazing PDF.js library

• 📖 Documentation: GitHub Wiki
• 💬 Community: GitHub Discussions
• 🐛 Issues: GitHub Issues
• 📧 Email: codehippie1@gmail.com
• 👨‍💻 Author: Aneesh Gopalakrishnan