ng-pdf-renderer π
A modern, zero-configuration PDF viewer for Angular applications with intelligent auto-fit, text selection, and responsive design.

β¨ Features
- π Zero Configuration - Works out of the box with sensible defaults
- π± Responsive Design - Auto-fits to any container size
- π Text Selection - Copy text directly from PDFs
- π Search Functionality - Find text within documents
- π¨οΈ Print & Download - Built-in actions
- π Zoom & Rotation - Interactive controls
- π Continuous Scrolling - All pages rendered seamlessly
- π― Modern Angular - Standalone components, signals, Angular 19+
- π οΈ Auto PDF.js Setup - No manual worker configuration needed
- β οΈ Enhanced Error Handling - Comprehensive error events with categorization
π¦ Installation
npm install ng-pdf-renderer
π Quick Start
Basic Usage (Recommended)
import { Component } from '@angular/core';
import { PdfViewerComponent } from 'ng-pdf-renderer';
@Component({
selector: 'app-pdf-demo',
standalone: true,
imports: [PdfViewerComponent],
template: `
<ng-pdf-viewer [src]=\"pdfUrl\"></ng-pdf-viewer>
`
})
export class PdfDemoComponent {
pdfUrl = '/assets/document.pdf';
}
That's it! The PDF viewer will automatically:
- Fit the PDF to your container width
- Enable text selection
- Handle high-DPI displays
- Set up PDF.js worker automatically
βοΈ Configuration Options
Default Values (Applied Automatically)
interface PdfOptions {
height?: string;
width?: string;
autoFit?: boolean;
initialZoom?: number;
initialPage?: number;
enableTextSelection?: boolean;
renderTextLayer?: boolean;
renderAnnotationLayer?: boolean;
showControls?: boolean;
showNavigation?: boolean;
showZoomControls?: boolean;
showRotationControls?: boolean;
showDownloadButton?: boolean;
showPrintButton?: boolean;
showSearchBar?: boolean;
showThumbnails?: boolean;
showOutline?: boolean;
}
Custom Configuration Example
import { Component } from '@angular/core';
import { PdfViewerComponent, PdfOptions } from 'ng-pdf-renderer';
@Component({
selector: 'app-custom-pdf',
standalone: true,
imports: [PdfViewerComponent],
template: `
<ng-pdf-viewer
[src]=\"pdfUrl\"
[options]=\"pdfOptions\"
(pageChange)=\"onPageChange($event)\"
(documentLoaded)=\"onDocumentLoaded($event)\">
</ng-pdf-viewer>
`
})
export class CustomPdfComponent {
pdfUrl = '/assets/document.pdf';
pdfOptions: PdfOptions = {
height: '800px',
showControls: true,
initialZoom: 1.2,
autoFit: false,
showThumbnails: true
};
onPageChange(page: number) {
console.log('Current page:', page);
}
onDocumentLoaded(document: any) {
console.log('PDF loaded:', document.numPages, 'pages');
}
}
β οΈ Error Handling (NEW in v1.2.0)
Handle PDF loading and rendering errors with the new errorOccurred
event:
@Component({
template: `
<ng-pdf-viewer
[src]="pdfUrl"
(errorOccurred)="onPdfError($event)">
</ng-pdf-viewer>
`
})
export class MyComponent {
onPdfError(error: PdfError): void {
console.error(`${error.type}: ${error.message}`);
if (error.type === 'network') {
this.showRetryOption();
} else if (error.type === 'permission') {
this.requestPassword();
}
}
}
Error Interface:
interface PdfError {
type: 'load' | 'render' | 'network' | 'permission' | 'corrupt' | 'timeout' | 'unknown';
message: string;
pageNumber?: number;
timestamp: Date;
}
π― Auto-Fit vs Manual Zoom Controls
How Auto-Fit Works
The autoFit
feature (enabled by default) automatically scales PDFs to fit your container:
- Responsive: Adapts to container width changes
- Scale bounds: Between 10% and 300% for readability
- Container-aware: Calculates optimal zoom based on available space
Important: Auto-Fit vs Manual Zoom Interaction
β οΈ When autoFit: true
(default), manual zoom controls may not work as expected:
pdfOptions: PdfOptions = {
showControls: true,
autoFit: true
};
Solutions:
Option 1: Disable Auto-Fit for Manual Control
pdfOptions: PdfOptions = {
autoFit: false,
initialZoom: 1.0,
showControls: true
};
Option 2: Use Auto-Fit Only (Recommended)
pdfOptions: PdfOptions = {
autoFit: true,
showControls: false
};
π± Container CSS Best Practices
.pdf-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.pdf-container {
overflow: hidden;
height: 400px;
max-width: 300px;
}
π§ Advanced Features
Event Handling
@Component({
template: `
<ng-pdf-viewer
[src]=\"pdfUrl\"
(pageChange)=\"onPageChange($event)\"
(documentLoaded)=\"onDocumentLoaded($event)\"
(errorOccurred)=\"onError($event)\">
</ng-pdf-viewer>
`
})
export class AdvancedPdfComponent {
onPageChange(pageNumber: number) {
console.log(`User navigated to page ${pageNumber}`);
}
onDocumentLoaded(document: any) {
console.log(`PDF loaded with ${document.numPages} pages`);
}
onError(error: PdfError) {
console.error('PDF error:', error);
}
}
Loading from Different Sources
export class PdfSourcesComponent {
localPdf = '/assets/document.pdf';
externalPdf = 'https://example.com/document.pdf';
base64Pdf = 'data:application/pdf;base64,JVBERi0xLjQK...';
arrayBuffer: Uint8Array;
onFileSelected(event: any) {
const file = event.target.files[0];
if (file.type === 'application/pdf') {
const reader = new FileReader();
reader.onload = (e) => {
this.arrayBuffer = new Uint8Array(e.target?.result as ArrayBuffer);
};
reader.readAsArrayBuffer(file);
}
}
}
π Troubleshooting
Common Issues
PDF not displaying:
Text selection not working:
pdfOptions: PdfOptions = {
enableTextSelection: true,
renderTextLayer: true
};
Manual zoom controls not responding:
pdfOptions: PdfOptions = {
autoFit: false,
showControls: true,
initialZoom: 1.0
};
PDF too large/small:
pdfOptions: PdfOptions = {
autoFit: true,
initialZoom: undefined
};
Performance issues:
pdfOptions: PdfOptions = {
renderAnnotationLayer: false,
showThumbnails: false
};
π§ Browser Support
- Chrome: 90+ β
- Firefox: 88+ β
- Safari: 14+ β
- Edge: 90+ β
π Requirements
- Angular: 19.1.0 or higher
- Node.js: 18.0.0 or higher
- TypeScript: 5.0 or higher
π€ Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
π License
MIT Β© askinjohn
π Links
Made with β€οΈ for the Angular community