# 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.** [![npm](https://img.shields.io/npm/v/ng2-pdfjs-viewer?logo=npm&color=blue)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![downloads / month](https://img.shields.io/npm/dm/ng2-pdfjs-viewer?color=orange)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![total downloads](https://img.shields.io/badge/total-7M%2B-brightgreen?logo=npm)](https://www.npmjs.com/package/ng2-pdfjs-viewer) [![PDF.js](https://img.shields.io/badge/PDF.js-6.0.227-green?logo=mozilla)](https://github.com/mozilla/pdf.js) [![Angular](https://img.shields.io/badge/Angular-%3E%3D10-red?logo=angular)](https://angular.dev) [![license](https://img.shields.io/badge/license-Apache--2.0%20%2B%20Commons%20Clause-blue.svg)](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/LICENSE) [![stars](https://img.shields.io/github/stars/intbot/ng2-pdfjs-viewer?logo=github)](https://github.com/intbot/ng2-pdfjs-viewer) [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/intbot/ng2-pdfjs-viewer/badge)](https://scorecard.dev/viewer/?uri=github.com/intbot/ng2-pdfjs-viewer) [**Live demo**](https://angular-pdf-viewer-demo.vercel.app/) · [**Documentation**](https://angular-pdf-viewer-docs.vercel.app/) · [**API reference**](https://angular-pdf-viewer-docs.vercel.app/docs/api/component-inputs) · [**Changelog**](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/CHANGELOG.md)

--- Drop a production PDF viewer into any Angular app with a single tag. ng2-pdfjs-viewer wraps Mozilla **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**, **7M+ downloads**, mobile-first, and built & verified on **Angular 22** while keeping a wide `>=10` peer range so existing apps upgrade without churn. ```bash npm install ng2-pdfjs-viewer ``` ```html ``` That's the whole integration. [Wire up the assets](#-quick-start) 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](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/ACCESSIBILITY.md). | → Explore every feature with live code on the **[documentation site](https://angular-pdf-viewer-docs.vercel.app/)** and **[demo](https://angular-pdf-viewer-demo.vercel.app/)**. ## 🚀 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://angular-pdf-viewer-docs.vercel.app/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://angular-pdf-viewer-docs.vercel.app/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 ``` ## 📚 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://angular-pdf-viewer-docs.vercel.app/docs/getting-started) | Install, assets, first viewer, production deployment | | 🧭 [Feature guides](https://angular-pdf-viewer-docs.vercel.app/docs/features/overview) | Annotation, forms, search, AI, read-aloud, custom UI, protection, and more | | 🔧 [API reference](https://angular-pdf-viewer-docs.vercel.app/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://angular-pdf-viewer-docs.vercel.app/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://angular-pdf-viewer-docs.vercel.app/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. ## 📄 License [Apache-2.0 with the Commons Clause](https://github.com/intbot/ng2-pdfjs-viewer/blob/master/LICENSE). 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](https://github.com/mozilla/pdf.js), and shaped over the years by a community of contributors and 7M+ downloads' worth of real-world use. ---

[Documentation](https://angular-pdf-viewer-docs.vercel.app/) · [Live demo](https://angular-pdf-viewer-demo.vercel.app/) · [npm](https://www.npmjs.com/package/ng2-pdfjs-viewer) · [Issues](https://github.com/intbot/ng2-pdfjs-viewer/issues)