Skip to main content

Getting Started

Get ng2-pdfjs-viewer up and running in your Angular application in just a few minutes.

Prerequisites​

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

Installation​

Step 1: Install the Package​

npm install ng2-pdfjs-viewer --save

Step 2: Import the Module​

Add PdfJsViewerModule to your Angular module:

app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    PdfJsViewerModule  // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Use in Your Component​

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

The pdfSrc property accepts URLs (strings), Blob objects, or Uint8Array byte arrays.

Step 4: Add a PDF File​

Place a PDF file in your src/assets/ folder (e.g., sample.pdf).

That's It! 🎉​

Your PDF viewer is now ready to use. The component will automatically:

  • Load and display your PDF
  • Show a loading spinner while loading
  • Handle errors gracefully
  • Provide full PDF.js functionality

Next Steps​

Basic Configuration​

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

Event Handling​

app.component.ts
export class AppComponent {
  onDocumentLoad() {
    console.log('PDF loaded successfully!');
  }

  onDocumentError(error: any) {
    console.error('Failed to load PDF:', error);
  }
}
app.component.html
<ng2-pdfjs-viewer
  pdfSrc="assets/sample.pdf"
  (onDocumentLoad)="onDocumentLoad()"
  (onDocumentError)="onDocumentError($event)">
</ng2-pdfjs-viewer>

Common Issues​

PDF Not Loading?​

  1. Check the file path: Ensure your PDF is in src/assets/
  2. Check browser console: Look for any error messages
  3. Verify file size: Large PDFs may take time to load
  4. CORS issues: Ensure your server allows PDF access

Build Errors?​

  1. Clear Angular cache: rm -rf .angular/cache
  2. Reinstall dependencies: npm install
  3. Check Angular version: Ensure compatibility

Production Issues?​

PDF viewer stuck at loading screen in production

This is caused by incorrect MIME types for .mjs and .ftl files.

Nginx configuration:

types {
    application/javascript  js mjs;
    text/plain             ftl;
}

IIS configuration (web.config):

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

Why: PDF.js v5+ uses ES modules (.mjs) and localization files (.ftl) that need proper MIME type configuration.

What's Next?​

Need Help?​