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