ng-simple-pdf-viewer

A modern, lightweight Angular PDF viewer component with advanced features including scroll-based page tracking, floating toolbar, and seamless navigation.

Features

• 📄 Full PDF Rendering: Based on Mozilla's PDF.js library for reliable PDF display
• 🎯 Smart Page Tracking: Automatically updates current page based on scroll position
• 🎨 Floating Toolbar: Modern translucent overlay that becomes opaque on interaction
• 🖨️ Print Support: Built-in print functionality with proper PDF handling
• 📱 Responsive Design: Adapts to different screen sizes and orientations
• ⚡ Smooth Navigation: Programmatic and scroll-based page navigation
• 🎭 Customizable UI: Toggle toolbar elements and styling options
• 🔄 Auto-scaling: Pages automatically scale to fit container width

Installation

Choose your preferred package manager:

# npm
npm install ng-simple-pdf-viewer

# yarn
yarn add ng-simple-pdf-viewer

# pnpm
pnpm add ng-simple-pdf-viewer

# bun
bun add ng-simple-pdf-viewer

Usage

Basic Usage

<ng-simple-pdf-viewer url="https://example.com/document.pdf" file-name="My Document.pdf"> </ng-simple-pdf-viewer>

Advanced Usage with Customization

<ng-simple-pdf-viewer url="https://example.com/document.pdf" file-name="My Document.pdf" [show-toolbar]="true" [show-download-button]="true" [show-print-button]="true" (on-load)="onPdfLoaded($event)" (on-page-change)="onPageChanged($event)" (on-error)="onPdfError($event)"> </ng-simple-pdf-viewer>

Component Integration

import { NgPdfViewerComponent } from "ng-simple-pdf-viewer";

@Component({
  selector: "app-pdf-viewer",
  standalone: true,
  imports: [NgPdfViewerComponent],
  template: ` <ng-simple-pdf-viewer [url]="pdfUrl" [file-name]="fileName" (on-page-change)="handlePageChange($event)"> </ng-simple-pdf-viewer> `,
})
export class PdfViewerComponent {
  pdfUrl = "https://example.com/document.pdf";
  fileName = "Document.pdf";

  handlePageChange(pageNumber: number) {
    console.log("Current page:", pageNumber);
  }
}

Input Properties

| Property | Type | Default | Description | | ---------------------- | ---------------- | ---------- | ------------------------------------ | | url | string \| null | null | URL of the PDF file to display | | file-name | string \| null | null | Name for downloaded file | | show-toolbar | boolean | true | Show/hide the floating toolbar | | show-download-button | boolean | true | Show/hide the download button | | show-print-button | boolean | true | Show/hide the print button | | on-load | Function | () => {} | Callback when PDF loads successfully | | on-page-change | Function | () => {} | Callback when current page changes | | on-error | Function | () => {} | Callback when PDF loading fails |

Output Events

| Event | Type | Description | | ---------------- | ------------------------------ | ------------------------------------------------------------ | | on-load | (pdfDoc: any) => void | Emitted when PDF document loads successfully | | on-page-change | (pageNumber: number) => void | Emitted when the current page changes (scroll or navigation) | | on-error | (error: any) => void | Emitted when PDF loading or rendering fails |

Public Methods

| Method | Parameters | Description | | --------------------------- | ----------------- | ------------------------------ | | nextPage() | None | Navigate to the next page | | prevPage() | None | Navigate to the previous page | | goToPage(pageNum: number) | pageNum: number | Jump to a specific page number | | downloadPdf() | None | Download the current PDF file | | printPdf() | None | Print the current PDF file |

Styling

The component uses CSS custom properties and can be styled using standard CSS:

ng-simple-pdf-viewer {
  --first-page-height: 600px; /* Set initial container height */
}

/* Customize toolbar appearance */
.document-toolbar {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
}

/* Customize page styling */
.document-page {
  margin: 2rem 0;
}

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Dependencies

• Angular 15+
• PDF.js (included)

License

MIT