@genus/pdf-viewer

Angular PDF viewer built on pdf.js (pdfjs-dist) with a small API and worker setup that works in Amplify/Capacitor.

Install

npm i pdfjs-dist

This library declares pdfjs-dist as a dependency and Angular as peer dependencies.

Worker setup (recommended: library provider)

Use the provider shipped by the library, which sets a sensible default and allows overrides.

// main.ts or app.config.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideGenusPdfViewer } from '@genus/pdf-viewer';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideGenusPdfViewer({
      // optional overrides:
      // workerSrc: '/assets/pdf.worker.min.mjs',
      // tryModuleWorker: true,
    })
  ]
});

Notes:

• The provider first tries a module worker (new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url)) and falls back to workerSrc if needed.
• Default workerSrc is /assets/pdf.worker.min.mjs. If using that, copy node_modules/pdfjs-dist/build/pdf.worker.min.mjs to src/assets/pdf.worker.min.mjs and ensure angular.json includes src/assets.
• Optional CMaps: copy node_modules/pdfjs-dist/cmaps to src/assets/cmaps/ and set cMapUrl/cMapPacked if you enable text layer.

Manual alternative (not recommended): set GlobalWorkerOptions.workerSrc yourself at bootstrap.

Usage

import { GenusPdfViewerComponent } from '@genus/pdf-viewer';

<genus-pdf-viewer
  [src]="docUrl"
  [fit]="'width'"
  [continuous]="true"
  [showToolbar]="true">
</genus-pdf-viewer>

Inputs: src, page, zoom, maxZoom, minZoom, fit, disableTextLayer, continuous, showToolbar.

Methods (via ViewChild): goTo(page), zoomIn(step), zoomOut(step).

Features

• Continuous scrolling with width-fit for a doc-like reading experience.
• Toolbar: zoom in/out, page nav, Download, Print.
• Pan when zoomed: cursor changes to grab/grabbing; drag to scroll.

Build

ng build genus-pdf-viewer

Artifacts appear in dist/genus-pdf-viewer.

Notes

• Keep worker at /assets/pdf.worker.min.mjs for Amplify/Capacitor.
• Ensure your server supports range requests for streaming PDFs.