ng2-pdfjs-viewer
Version:
The most comprehensive Angular PDF viewer, powered by Mozilla PDF.js 6 — view, annotate, sign, fill forms, search, and read aloud from one component. 8.3M+ downloads, mobile-first, production-ready.
257 lines (187 loc) • 13.7 kB
Markdown
<div align="center">
<img src="https://raw.githubusercontent.com/intbot/ng2-pdfjs-viewer/master/lib/pdf-viewer-banner.png" alt="#1 Angular PDF Viewer — ng2-pdfjs-viewer: AI-enabled, feature-rich and comprehensive. 8.3M+ downloads, 0 runtime dependencies, 8 years (since 2018), Angular 10–22." width="880" />
# 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.**
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
[](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/BILL-OF-MATERIALS.md)
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
[](https://github.com/intbot/ng2-pdfjs-viewer/security/code-scanning)
[](https://angular.dev)
[](https://github.com/mozilla/pdf.js)
[](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/LICENSE)
[](https://github.com/intbot/ng2-pdfjs-viewer)
[](https://stackblitz.com/github/intbot/ng2-pdfjs-viewer/tree/master/examples/quickstart)
[](https://codesandbox.io/p/sandbox/github/intbot/ng2-pdfjs-viewer/tree/master/examples/quickstart)
[**Documentation**](https://angularpdf.com/) · [**API reference**](https://angularpdf.com/docs/api/component-inputs) · [**Live demo**](https://demo.angularpdf.com/) · [**Showcase**](https://angularpdf.com/showcase) · [**Changelog**](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/CHANGELOG.md)
⭐ **Find it useful? [Star it on GitHub](https://github.com/intbot/ng2-pdfjs-viewer)** — it helps more Angular developers discover it.
</div>
---
Drop a production PDF viewer into any Angular app with a single tag. ng2-pdfjs-viewer wraps
**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**, **8.3+ million downloads**, mobile-first, and built & verified on **Angular 22**
while keeping a wide `>=10` peer range so existing apps upgrade without churn.
From France's data-protection regulator to Switzerland's federal tech institute, it's in
production on five continents — [see who's using it ↓](#-used-in-production).
```bash
npm install ng2-pdfjs-viewer
```
```html
<ng2-pdfjs-viewer pdfSrc="assets/sample.pdf"></ng2-pdfjs-viewer>
```
That's the whole integration. [Wire up the assets](#-quick-start) and you have a full viewer.
## 🌍 Used in production
National regulators, public universities, research infrastructure, and fintech platforms render
PDFs with ng2-pdfjs-viewer — on five continents. Among them:
| | |
|---|---|
| <img src="https://flagcdn.com/20x15/ch.png" width="20" alt="Switzerland"> **EPFL** | Switzerland's federal institute of technology — the Infoscience research portal |
| <img src="https://flagcdn.com/20x15/fr.png" width="20" alt="France"> **CNIL** | France's national data-protection authority |
| <img src="https://flagcdn.com/20x15/fi.png" width="20" alt="Finland"> **Finnish National Agency for Education** | the country's open learning-materials library (AOE) |
| <img src="https://flagcdn.com/20x15/au.png" width="20" alt="Australia"> **AuScope** | Australia's national geoscience research infrastructure |
| <img src="https://flagcdn.com/20x15/es.png" width="20" alt="Spain"> **Spain's Ministry of Culture** | the Travesía cultural-heritage platform |
| <img src="https://flagcdn.com/20x15/us.png" width="20" alt="United States"> **University of Virginia** | the Supporting Transformative Autism Research (DRIVE) program |
Part of **8.3M+ installs** worldwide. [See the full showcase →](https://angularpdf.com/showcase)
## ✨ Highlights
| | |
|---|---|
| 📄 **View anything** | Crisp, high-fidelity 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 — or go `chromeless` to hide the chrome for an embedded, pages-only view. |
| 🛡️ **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](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/ACCESSIBILITY.md). |
→ Explore every feature with live code on the **[documentation site](https://angularpdf.com/)** and **[demo](https://demo.angularpdf.com/)**.
## 🚀 Quick start
**1. Install**
```bash
npm install ng2-pdfjs-viewer
```
**2. Import the module** (or import the standalone component directly)
```typescript
import { PdfJsViewerModule } from "ng2-pdfjs-viewer";
@NgModule({
imports: [BrowserModule, PdfJsViewerModule],
})
export class AppModule {}
```
**3. Use the component**
```html
<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:
```json
{
"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](https://angularpdf.com/docs/getting-started) 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](https://angularpdf.com/docs/features/overview).
**Annotate, sign, and save the result**
```html
<ng2-pdfjs-viewer
#viewer
pdfSrc="assets/contract.pdf"
[(annotationEditor)]="mode"
[enableSignatureEditor]="true">
</ng2-pdfjs-viewer>
```
```typescript
// Later: hand the annotated + signed document to your upload
const blob = await this.viewer.getDocumentAsBlob();
```
**Bring your own AI assistant**
```html
<ng2-pdfjs-viewer pdfSrc="assets/report.pdf" [aiAssistantConfig]="ai"></ng2-pdfjs-viewer>
```
```typescript
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**
```html
<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>
```
**Embed just the pages (chromeless)**
```html
<ng2-pdfjs-viewer pdfSrc="assets/doc.pdf" [chromeless]="true"></ng2-pdfjs-viewer>
```
One switch hides the toolbar and sidebar so the iframe shows only the scrolling
pages — handy for inline previews. It's shorthand for `[showToolbar]="false"` +
`[showSidebar]="false"` and overrides them without touching those bindings, so
flip it off and your toolbar comes back. (There's still an iframe; reach for
`pageOverlayTpl` when you need per-page host DOM.)
## 📚 Documentation
The README is the front door — the deep reference lives on the docs site and stays in sync with each release.
| | |
|---|---|
| 🏁 [Getting started](https://angularpdf.com/docs/getting-started) | Install, assets, first viewer, production deployment |
| 🧭 [Feature guides](https://angularpdf.com/docs/features/overview) | Annotation, forms, search, AI, read-aloud, custom UI, protection, and more |
| 🔧 [API reference](https://angularpdf.com/docs/api/component-inputs) | Every `@Input()`, `@Output()`, and method, with types |
| ♿ [Accessibility](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/ACCESSIBILITY.md) | Screen readers, tagged PDFs, keyboard nav, WCAG / EAA |
| 🖥️ [Server-side examples](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/Server-Side-Examples.md) | Streaming, authenticated fetch, signed URLs |
| 📝 [Changelog](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/CHANGELOG.md) | What changed, and behavior notes when upgrading |
The component exposes **30+ inputs**, **24+ events**, and **19+ Promise-returning methods**.
The [API reference](https://angularpdf.com/docs/api/component-inputs) 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:
```html
<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](https://angularpdf.com/docs/features/loading-documents).
## 🛡️ 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](https://scorecard.dev/viewer/?uri=github.com/intbot/ng2-pdfjs-viewer).
Report vulnerabilities via [SECURITY.md](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/SECURITY.md).
## 🤝 Contributing
Issues and PRs are welcome. To run the library against the demo app locally:
```bash
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](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/CONTRIBUTING.md) for the full setup, and look for
[`good first issue`](https://github.com/intbot/ng2-pdfjs-viewer/labels/good%20first%20issue) to get started.
## 🏗️ Showcase
Shipped something with ng2-pdfjs-viewer? [Add it to the showcase](https://angularpdf.com/showcase) — submitted projects are listed next to other production apps using the viewer.
Using it somewhere that won't show up in public code — an internal tool, a hospital system, a government portal? I'd like to hear about it: email **codehippie1@gmail.com** with a line about what you're building. Teams in healthcare, finance, education, and public-sector software already have. (Bugs and feature requests are best filed as [an issue](https://github.com/intbot/ng2-pdfjs-viewer/issues).)
## 📄 License
[Apache-2.0](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/LICENSE). Use, modify, self-host, or ship it inside a commercial product — the Apache 2.0 grant is perpetual, irrevocable, and carries an express patent license.
## 🙏 Acknowledgments
Built on the excellent [Mozilla PDF.js](https://github.com/mozilla/pdf.js), and shaped over the
years by a community of contributors and 8.3+ million downloads' worth of real-world use.
---
<div align="center">
[Documentation](https://angularpdf.com/) · [Live demo](https://demo.angularpdf.com/) · [npm](https://www.npmjs.com/package/ng2-pdfjs-viewer) · [Issues](https://github.com/intbot/ng2-pdfjs-viewer/issues)
</div>