ngx-extended-pdf-viewer
Advanced tools
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.
Welcome to ngx-extended-pdf-viewer – a powerful, full-featured PDF viewer for Angular applications. Whether you're building enterprise tools or internal utilities, this library gives you the control and customization options you need, all while preserving a native-like viewing experience.
Built on Mozilla’s pdf.js and extended with dozens of enhancements, it's ideal for serious applications that demand more than just basic PDF display.
The library requires Angular 17+. Older versions are not supported.
In general, I aim to support the last four Angular versions (roughly two years of updates), but this may not always be feasible. For example, the upcoming version 26 might raise the minimum required Angular version significantly: I plan to support modern Angular (and I know many of you are waiting for that). You can't have an omelette without breaking an egg.
Install via npm:
npm add ngx-extended-pdf-viewer
In your component HTML:
<ngx-extended-pdf-viewer [src]="'assets/example.pdf'"></ngx-extended-pdf-viewer>
For NgModule-based applications:
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
@NgModule({
imports: [NgxExtendedPdfViewerModule],
})
export class AppModule {}
For standalone components (Angular 17+):
import { Component } from '@angular/core';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
@Component({
selector: 'app-pdf-viewer',
standalone: true,
imports: [NgxExtendedPdfViewerModule],
template: `<ngx-extended-pdf-viewer [src]="'assets/example.pdf'"></ngx-extended-pdf-viewer>`,
})
export class PdfViewerComponent {}
Or configure in main.ts for application-wide availability:
import { bootstrapApplication } from '@angular/platform-browser';
import { importProvidersFrom } from '@angular/core';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(NgxExtendedPdfViewerModule),
// other providers...
],
});
🧭 For hands-on examples and step-by-step guides, visit the showcase and the getting started page.
Version 20.0.2 fixes a critical security vulnerability (CVE-2024-4367). Update to this version or newer to stay safe from exploits via malicious PDF files.
Thanks to GitHub users ScratchPDX and Deepak Shakya for reporting the issue promptly.
Originally, these features where announced for version 25. But an unexpected breaking changed forced me to add an intermediate major version.
zone.js (maybe)Expect some breaking changes — but better performance and modern Angular support await!
Regarding security: I'm not perfect - it's always a best-effort approach without guarantees. I'm 100% committed, but I need your help, and even so, in the long run, errors are invevitable. The art is to close vulnerabilities before a hacker can exploit then - and that's a joint effort. Together, we'll manage. Don't hesitate to report bugs and vulnerabilities as soon as possible!
See the full list of features on the showcase site.
The license has changed from Apache 2.0 to Apache 2.0 with Commons Clause, which allows free use, modification, and distribution while preventing commercial sale or paid services without permission. You can still use ngx-extended-pdf-viewer in your commercial or closed-source products, and you can distribute it with your software, provided you keep the copyright notice intact. For the exact terms, please refer to the LICENSE file — that is the legally binding document.
[page] or [zoom] and if the PDF viewer opens a PDF document for the second time, the PDF opens on the same page and with the same zoom setting it had before. Before version 25.5.0, the PDF would always open at page 1 and with zoom = pdfDefaultOptions.defaultZoomValue (which usually is 'auto'). I think that's a mildly breaking change, so I raised the version number to 25.5.0.#E8E8EB to #FFFFFF.pdfDefaultOptions.enableScripting — main toggle. Set it to true to allow execution of embedded JavaScript.pdfDefaultOptions.enableOpenActionJavaScript — allows JavaScript that runs when opening a PDF file. Requires pdfDefaultOptions.enableScripting = true.pdfDefaultOptions.enableCatalogAAJavaScript — allows JavaScript that runs when printing, saving, or closing a PDF file. Requires pdfDefaultOptions.enableScripting = true.Security note: Embedded JavaScript in PDFs runs inside a sandboxed JavaScript interpreter (written in C and transpiled to JavaScript) and does not use functions like eval(). These measures reduce — but do not eliminate — potential security risks. For that reason, all related options are disabled by default, and enabling them is at your own risk. While these features can be useful, be aware that no software can guarantee complete protection against malicious content. Read more about the JavaScript sandbox here.
Version 24.3.0 adds a dark mode. Thanks to Megan Truso for providing the pull request!
Version 24.2.0 and above:
enablePageReordering option allows users to reorder PDF pages by dragging thumbnails. Enable it with pdfDefaultOptions.enablePageReordering = true;.Version 24.1.0 and above: improved accessability by showing a hover effect when the mouse is over a button and by adding a blue ring to the active element, thus restoring the implementation we used to have a long time ago. Thanks to Megan for contributing this pull request!
Version 24.0.0:
pdf.js 5.3[(formData)]. In earlier versions, only the first field was changed. Kudos to Sebastien Fauvart for submitting this pull request!pdfDefaultOptions.enableSignatureEditor = true;. Caveat: these signature are not cyptographic PDF signatures. At the time of writing (July 07, 2025), they're merely "stamp annotations".❗ Version 23 includes a CSS bug where search highlights may render text invisible. To work around this, add the following to your global styles.css:
ngx-extended-pdf-viewer .textLayer .highlight.selected {
opacity: 0.25;
}
Remove this workaround after updating to 24.0.0+.
If you're stuck on a feature, try cloning the showcase repository. It’s a clean and working example, and comparing it to your app often helps locate the issue. And if the showcase doesn’t work — you can blame me!
git clone https://github.com/stephanrauh/extended-pdf-viewer-showcase.git
cd extended-pdf-viewer-showcase
npm install
npm start
👉 Open a ticket here if something’s broken.
[inputs], events, and CSS hooks:
Use NgxExtendedPdfViewerService for:
We want to hear from you!
👉 File issues here: GitHub Bug Tracker
If possible, include a code snippet or reproduction. Better yet — send a pull request!
I understand, but... realistically, I can’t maintain old versions in my spare time. The architecture allows for it, but I simply don’t have the bandwidth — unless something critical breaks.
If you're desperate for a fix or a new feature, there’s one option: ask my employer. I work as an IT consultant, and they may be willing to sponsor time to work on ngx-extended-pdf-viewer during business hours.
If this library doesn't fit your needs:
ng2-pdf-viewer: Minimal and lightweightng2-pdfjs-viewer: iframe-based, supports multiple PDFsYour feedback matters!
Just keep it respectful — the ngx-extended-pdf-viewer community is a friendly place, and I want to keep it that way!
Still using IE11 in 2025? You're braver than most.
I hate to admit it - but I've dropped support years ago. The last known compatible version is 5.3. Use it at your own risk — no updates, no fixes, no guarantees.
FAQs
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.
The npm package ngx-extended-pdf-viewer receives a total of 106,327 weekly downloads. As such, ngx-extended-pdf-viewer popularity was classified as popular.
We found that ngx-extended-pdf-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.