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: [email protected]
• 👨‍💻 Author: Aneesh Gopalakrishnan