Angular PDF viewer built on pdf.js (`pdfjs-dist`) with a small API and worker setup that works in Amplify/Capacitor.
npm install genus-pdf-viewerAngular PDF viewer built on pdf.js (pdfjs-dist) with a small API and worker setup that works in Amplify/Capacitor.
``bash`
npm i pdfjs-dist
This library declares pdfjs-dist as a dependency and Angular as peer dependencies.
Use the provider shipped by the library, which sets a sensible default and allows overrides.
`ts
// 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.workerSrc
- Default 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.node_modules/pdfjs-dist/cmaps
- Optional CMaps: copy to src/assets/cmaps/ and set cMapUrl/cMapPacked if you enable text layer.
Manual alternative (not recommended): set GlobalWorkerOptions.workerSrc yourself at bootstrap.
`ts`
import { GenusPdfViewerComponent } from '@genus/pdf-viewer';
`html`
[fit]="'width'"
[continuous]="true"
[showToolbar]="true">
Inputs: src, page, zoom, maxZoom, minZoom, fit, disableTextLayer, continuous, showToolbar.
Methods (via ViewChild): goTo(page), zoomIn(step), zoomOut(step).
`bash`
ng build genus-pdf-viewer
Artifacts appear in dist/genus-pdf-viewer.
- Keep worker at /assets/pdf.worker.min.mjs` for Amplify/Capacitor.
- Ensure your server supports range requests for streaming PDFs.