ng2-pdfjs-viewer
June 13, 2026 · View on GitHub
ng2-pdfjs-viewer
A complete PDF experience in one Angular component — view, annotate, sign, fill forms, search, and read aloud, powered by Mozilla PDF.js.
Drop a production PDF viewer into any Angular app with a single tag. ng2-pdfjs-viewer wraps
Mozilla PDF.js 6 in one declarative <ng2-pdfjs-viewer> component: rendering, navigation,
search, printing, theming, annotations, e-signatures, AcroForms, read-aloud, and a bring-your-own
AI assistant — all driven by typed @Input()s and @Output() events, no iframe plumbing of your own.
Shipping since 2018, 7M+ downloads, mobile-first, and built & verified on Angular 22
while keeping a wide >=10 peer range so existing apps upgrade without churn.
npm install ng2-pdfjs-viewer
<ng2-pdfjs-viewer pdfSrc="assets/sample.pdf"></ng2-pdfjs-viewer>
That's the whole integration. Wire up the assets and you have a full viewer.
✨ Highlights
| 📄 View anything | Crisp PDF.js 6 rendering, zoom, navigation, thumbnails, outline, printing — embedded, in a new tab, or a popout window. |
| ✍️ Annotate & sign | Highlight, draw, free-text, and stamp editors; opt-in draw/type/upload signature editor and threaded comments. Export and restore edits for a full server round-trip. |
| 🧾 Fill forms | Two-way AcroForm binding — read and write field values from your component, save the filled document as a blob. |
| 🔎 Search in code | Programmatic search() with totals, per-page counts, and next/previous navigation — build your own find UI. |
| 🤖 AI assistant (BYO) | Point it at any OpenAI-compatible endpoint (OpenAI, Azure, Ollama, vLLM…). Answers cite pages and click through. The library never calls an AI service on its own. |
| 🔊 Read aloud | Browser speech synthesis reads sentence by sentence, highlighting the spoken text and reporting progress. |
| 🗂️ Organize pages | Reorder, delete, cut/copy/paste, extract, and merge pages in the viewer's "Manage pages" panel. |
| 🎨 Make it yours | CSS-variable theming, true dark-mode page rendering, and your own Angular templates for the toolbar, sidebar, and per-page overlays. |
| 🛡️ Protect content | Block print/download, disable selection, and stamp watermarks (honest client-side deterrence — not DRM). |
| ♿ Accessible | Screen-reader friendly, tagged-PDF aware, keyboard navigable — with a WCAG / EAA guide. |
→ Explore every feature with live code on the documentation site and demo.
🚀 Quick start
1. Install
npm install ng2-pdfjs-viewer
2. Import the module (or import the standalone component directly)
import { PdfJsViewerModule } from "ng2-pdfjs-viewer";
@NgModule({
imports: [BrowserModule, PdfJsViewerModule],
})
export class AppModule {}
3. Use the component
<ng2-pdfjs-viewer pdfSrc="assets/sample.pdf" [theme]="'dark'"></ng2-pdfjs-viewer>
4. Serve the PDF.js assets — add them to your angular.json assets array:
{
"glob": "**/*",
"input": "node_modules/ng2-pdfjs-viewer/pdfjs",
"output": "/assets/pdfjs"
}
Production note: PDF.js 6 ships ES modules (
.mjs), localization (.ftl), and WebAssembly (.wasm) assets. Make sure your web server returns the correct MIME types for them — see the deployment guide for the nginx/IIS snippets.
🧩 What you can build
A few of the things the component makes one-liners. Full, runnable versions live in the feature guides.
Annotate, sign, and save the result
<ng2-pdfjs-viewer
#viewer
pdfSrc="assets/contract.pdf"
[(annotationEditor)]="mode"
[enableSignatureEditor]="true">
</ng2-pdfjs-viewer>
// Later: hand the annotated + signed document to your upload
const blob = await this.viewer.getDocumentAsBlob();
Bring your own AI assistant
<ng2-pdfjs-viewer pdfSrc="assets/report.pdf" [aiAssistantConfig]="ai"></ng2-pdfjs-viewer>
ai = { endpoint: "https://api.openai.com/v1/chat/completions", apiKey: "…", model: "gpt-4o" };
// Answers cite pages as [p.3] and click through. Your endpoint, your keys.
Replace the toolbar with your own
<ng2-pdfjs-viewer pdfSrc="assets/doc.pdf" [customToolbarTpl]="myToolbar"></ng2-pdfjs-viewer>
<ng-template #myToolbar let-viewer>
<button (click)="viewer.goToPage(1)">First page</button>
<button (click)="viewer.startReadAloud()">▶ Read aloud</button>
</ng-template>
📚 Documentation
The README is the front door — the deep reference lives on the docs site and stays in sync with each release.
| 🏁 Getting started | Install, assets, first viewer, production deployment |
| 🧭 Feature guides | Annotation, forms, search, AI, read-aloud, custom UI, protection, and more |
| 🔧 API reference | Every @Input(), @Output(), and method, with types |
| ♿ Accessibility | Screen readers, tagged PDFs, keyboard nav, WCAG / EAA |
| 🖥️ Server-side examples | Streaming, authenticated fetch, signed URLs |
| 📝 Changelog | What changed, and behavior notes when upgrading |
The component exposes 30+ inputs, 24+ events, and 19+ Promise-returning methods. The API reference is the complete, typed list.
🔌 Loading documents
pdfSrc accepts a URL, a Blob, a Uint8Array, or an ArrayBuffer. For protected documents,
attach credentials and track progress:
<ng2-pdfjs-viewer
[pdfSrc]="url"
[httpHeaders]="{ Authorization: 'Bearer ' + token }"
[withCredentials]="true"
(onProgress)="loaded = $event"
(onPasswordPrompt)="onPasswordNeeded()">
</ng2-pdfjs-viewer>
For large files, linearize ("fast web view") and serve with HTTP range support so the first pages render before the whole document downloads. Details in the loading guide.
🛡️ Security
The viewer runs in a same-origin iframe with an allowlisted sandbox, and the host↔viewer
postMessage bridge checks event.source in both directions. PDF links open in a new tab by
default (externalLinkTarget), and pdfJsOptions only forwards an allowlisted set of PDF.js
options. The package ships with npm provenance and is tracked by an
OpenSSF Scorecard.
Report vulnerabilities via SECURITY.md.
🤝 Contributing
Issues and PRs are welcome. To run the library against the demo app locally:
git clone https://github.com/intbot/ng2-pdfjs-viewer.git
cd ng2-pdfjs-viewer
test.bat # build the lib, link it, and serve the demo on http://localhost:4200
See CONTRIBUTING.md for the full setup, and look for
good first issue to get started.
📄 License
Apache-2.0 with the Commons Clause. Free to use, modify, and self-host; the Commons Clause restricts selling the software itself as a hosted/commercial product.
🙏 Acknowledgments
Built on the excellent Mozilla PDF.js, and shaped over the years by a community of contributors and 7M+ downloads' worth of real-world use.
Documentation · Live demo · npm · Issues