How to Build an Angular PDF Viewer with PDF.js
By Isaac Maw | 2025 Jun 25
4 min
Tags
pdf.js
angular
webviewer
Summary: Looking to use PDF.js for parsing and rendering PDFs in your Angular application? Here’s a handy guide. If you’re looking for more a powerful and broader feature set, consider WebViewer for your document SDK.
Angular is an open-source, JavaScript framework based on TypeScript, and is used to create web applications. PDF.js is a general purpose JavaScript library for parsing and rendering PDFs.
If you’re looking to add PDF functionality to your Angular application via an SDK, you have a few options. With an open-source option like PDF.js, you have a lightweight, basic and low-cost option, providing a straightforward path to basic functionality. With an eye to future development and additional features, such as PDF editing, document security, conversion, or additional file type support, a more robust SDK like WebViewer could be a better solution.
Before you decide, check out the guide in this article for building a PDF viewer using PDF.js and Angular, and read on for the details on why developers choose WebViewer instead.
The Angular PDF Viewer includes a handful of widgets, making it ideal for basic PDF viewing use cases:
- Opening a local file
- Toggling document outline
- Rotating left/right
- Zooming in/out
- Toggling fit page
- Toggling the display of all pages
- Previous/next page navigation
- Searching text
PDF.js vs. Apryse: Which to Choose?
PDF.js is a good option when you need a fast, low-cost solution for viewing small and simple PDFs on the web. PDF.js comes with a basic set of features – such as zoom, pagination, and search – that should suffice for projects that don’t require a heavy set of functionality. Plus, most of its dependencies rely on universal web standards, while its UI can be restyled quickly using CSS and HTML.
What are the limitations of PDF.js?
However, as tempting as an open source tool can be, PDF.js may be limiting for anyone who needs more complex features or support. After surveying some current organizations that came to us after trying PDF.js, here are the top reasons they made the switch:
Functionality: They wanted to view a range of documents, from PDFs to Word docs, CAD projects, images, and video. Other considered features include annotations, rich search capabilities, forms and signatures, page encryption, and more.
Reliability: A need for robust support and efficient memory usage for even large and complex documents. Note: Search on default PDF.js does not pick up word breaks if the word goes to the next paragraph.
Customizability: Control over functionality, behavior, and appearance, and the ability to add or remove features to reflect the brand and UX they wanted.
Performance: Features to optimize documents, compress images, and reduce document complexity, as well as linearized PDF to stream content into the browser and experience blazing-fast display times.
Support: Some dedicated technical support and professional services to smooth out the process of integrating, developing, and customizing the viewer.
Building an Angular PDF viewer with ngx-extended-pdf-viewer
There are several good open-source Angular PDF viewer libraries available and one of the most prominent is Ngx-extended-pdf-viewer. With around 97k weekly downloads on NPM, this ranks among the most popular Angular PDF libraries. It comes with a full suite of UI widgets, a programmatic API, and many other features.
Step 1: Set Up Angular
To get started with Angular, ensure you have the latest version of node.js. We will use npm for our package manager.
Then, install the Angular CLI with:
npm install -g @angular/cli Now, we can create a new Angular project in a new folder:
mkdir pdf-viewer && cd pdf-viewer
ng new ngx-pdf-viewer We’ll choose:
Routing: no
Stylesheet format: CSS
Then, start the dev server in a new directory:
cd ngx-pdf-viewer
npm start The app should now be running at http://localhost:4200.
Step 2: Install ngx-extended-pdf-viewer
Now that we have Angular and our dev server, we can run the command to install the ngx-extended-pdf-viewer library via npm:
npm install ngx-extended-pdf-viewer Now, we'll configure the angular.json file. You’ll add this configuration under projects > yourProjectName > architect > build > options > assets.
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/ngx-extended-pdf-viewer/assets/",
"output": "/assets/"
}
], Go to the app.component.ts file, import NgxExtendedPdfViewerModule from ngx-extended-pdf-viewer, and pass it to the imports array:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NgxExtendedPdfViewerModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}) Step 3: Viewing a PDF
Now, we’ll try displaying a PDF document. Add your document to the src/assets directory. To see your PDF file in the browser, go to the app.component.html file and replace the contents with:
<ngx-extended-pdf-viewer
[src]="'assets/example.pdf'"
[textLayer]="true"
[showHandToolButton]="true"
[showPresentationModeButton]="true"
[showDownloadButton]="true"
></ngx-extended-pdf-viewer> To run the project:
ng serve Your file should be displayed at http://localhost:4200.
And that's it— you're done! You now have a basic Angular PDF viewer that matches your app's look and feel. You can find more details about the open source ngx-extended-pdf-viewer at the npm website.
This open-source option is great solution for basic capabilities, where you're not concerned with rendering inconsistencies or failures in PDF.js Angular. If you need more robust functionality, such as annotation, form filling, or other features, you must implement them yourself. See our Guide to Evaluating PDF.js to learn more.
For 100% rendering reliability, hundreds of features out-of-the-box, and more granular control of UX, consider Apryse WebViewer, a JavaScript PDF Viewer:
- View, annotate, and collaborate in real-time
- DOCX and Spreadsheet editor add-ons
- WCAG 2.1 Level AA Accessibility
- Watermark, stamp, form fill, sign, search, and more
- Client-side PDF editing (without a server)
- Document security, DRM, encryption, redaction
- Overprint, ICC color management, color separation
- PDF, Microsoft Office, and 30+ formats
Check out our online demo.
Additionally, it's easy to integrate WebViewer into your Angular project.
How to Integrate Apryse
WebViewer Into Angular Projects
Start by cloning our WebViewer Angular sample project:
git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
cd webviewer-samples/webviewer-angular
npm installThen, from the command line, enter:
npm startNavigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
And that's it! You've now got a robust and reliable PDF viewer that's easy to customize.
Conclusion
Building a PDF Viewer with Angular and PDF.js is straightforward, but if you need more advanced features, significantly improved reliability, or high-fidelity rendering, open source is not always the best approach.
Apryse WebViewer is a JavaScript-based PDF library with hundreds of features, support for 30+ file formats, with a proven rendering engine built right in, and is simple to integrate with Angular projects. Try our JavaScript PDF library today for free!
Check out our online demo or try it free.
If you have any questions about Apryse PDF SDK, contact us!
You can find the source code for this blog post at Github.
Tags
pdf.js
angular
webviewer
Isaac Maw
Technical Content Creator
Share this post
