#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. # 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.** [![total downloads](https://img.shields.io/badge/total%20downloads-8.3M%2B-22c55e?style=flat-square&logo=npm)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![npm version](https://img.shields.io/npm/v/ng2-pdfjs-viewer?style=flat-square&logo=npm&color=2563eb)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![downloads / month](https://img.shields.io/npm/dm/ng2-pdfjs-viewer?style=flat-square&color=f97316)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![runtime dependencies](https://img.shields.io/badge/runtime%20deps-0-success?style=flat-square)](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/BILL-OF-MATERIALS.md) [![types](https://img.shields.io/npm/types/ng2-pdfjs-viewer?style=flat-square)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![CodeQL](https://github.com/intbot/ng2-pdfjs-viewer/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/intbot/ng2-pdfjs-viewer/security/code-scanning) [![Angular](https://img.shields.io/badge/Angular-%3E%3D10-red?style=flat-square&logo=angular)](https://angular.dev) [![PDF.js](https://img.shields.io/badge/PDF.js-6.0.227-green?style=flat-square&logo=mozilla)](https://github.com/mozilla/pdf.js) [![license](https://img.shields.io/badge/license-Apache--2.0-blue?style=flat-square)](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/LICENSE) [![stars](https://img.shields.io/github/stars/intbot/ng2-pdfjs-viewer?style=flat-square&logo=github)](https://github.com/intbot/ng2-pdfjs-viewer) [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-1389FD?style=flat-square&logo=stackblitz&logoColor=white)](https://stackblitz.com/github/intbot/ng2-pdfjs-viewer/tree/master/examples/quickstart) [![Edit on CodeSandbox](https://img.shields.io/badge/Edit%20on-CodeSandbox-151515?style=flat-square&logo=codesandbox&logoColor=white)](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.
--- Drop a production PDF viewer into any Angular app with a single tag. ng2-pdfjs-viewer wraps **PDF.js 6** in one declarative `` 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 ``` 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: | | | |---|---| | Switzerland **EPFL** | Switzerland's federal institute of technology — the Infoscience research portal | | France **CNIL** | France's national data-protection authority | | Finland **Finnish National Agency for Education** | the country's open learning-materials library (AOE) | | Australia **AuScope** | Australia's national geoscience research infrastructure | | Spain **Spain's Ministry of Culture** | the Travesía cultural-heritage platform | | 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 ``` **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 ``` ```typescript // Later: hand the annotated + signed document to your upload const blob = await this.viewer.getDocumentAsBlob(); ``` **Bring your own AI assistant** ```html ``` ```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 ``` **Embed just the pages (chromeless)** ```html ``` 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 ``` 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. ---
[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)