Beyond Java

Recently, I've published the first 1.0 version of my Angular PDF viewer widget.

Showcase

You're in a hurry? Then I'll point you to my showcase. https://pdfviewer.net has code snippets, live demos, and all the information to get you started.

Getting started

Using the PDF viewer is pretty straight-forward:

Of course, you can also use Base64 encoded files. As it turns out, it's impossible to detect the Base64 encoding reliably. That's why theres a dedicated attribute for Base64 files:

In most cases, you'll want to add two additional attributes:

height is useful for pages lacking the CSS rule body {height: 100%;}. Without the 100% default setting, the PDF viewer usually gets very little screen estate.

useBrowserLocale="true" informs the PDF viewer that the i18n locale files are in the assets folder. If you stick with the default value, you'll have to add the text files in the index.html. That's more efficient, so it's worth the extra configuration step.

Download coordinates

I assume you're using the standard Angular 8 CLI. That excludes older Ionic versions (till Ionic 3) as well as current JHipster installations.

Being a well-behaved Angular library, ngx-extended-pdf-viewer is available on npm. So the first step is adding it to your project:

Now things become a little ugly. Don't run away - it's only matter of two minutes. All you have to do is to add a few lines to your angular.json:

You'll also want to add the text files and the images:

The rest is pretty standard. Add the NgxExtendedPdfViewerModule to the import section of your module file. If your IDE doesn't find the import automatically, here it is:

Ionic 3, JHipster, Internet Explorer 11, and Angular 5

I'm developing the PDF viewer with a standard Angular 7 setup. So it's compatible with Angular 6, 7, 8, and beyond, both with and without Ivy.

You can also use the PDF viewer with non-standard configurations like older versions of Ionic, JHipster, and your company's favorite browser IE11. I've documented the additional configuration steps href="in the showcase.

Why should you use it?

Actually, IE11 support is one of the key reasons to install ngx-extended-pdf-viewer. Modern browsers like Google Chrome and Firefox display PDF files natively. However, it's a bit tricky to embed the native PDF viewer in your application. So ngx-extended-pdf-viewer is the tool of choice to display PDF files on a wide range of devices.

As a bonus, ngx-extended-pdf-viewer is highly configurable. It offers 37 @Input() and six @Output() attributes. You can fine-tune the PDF viewer to your needs. The native browser hides most of these options from you.

Fun fact: the native PDF viewer is exactly the same PDF viewer ngx-extended-pdf-viewer uses. In both cases, the PDF engine is Mozilla's pdf.js project.

State of the art and alternatives

For the sake of completeness, let's cover the alternatives. ng2-pdfjs-viewer offers almost the same functionality. The main difference is that it's using iFrames.

If you only need to display the PDF files without the toolbars and menus, have a look at ng2-pdf-viewer.

ng2-image-viewer is also an interesting alternative. The author, Breno Prata, took the ImageViewer library, wrapped in a carousel, and added PDF support to it.

As far as I can see, ng2-image-viewer relies on the browser to render the PDF file natively. Don't hope for Internet Explorer support. Plus, it always displays the entire PDF viewer, including the toolbars. There are no options to customize it. Other than that, it's a neat little library if you need to display the PDF file in a carousel.

Have a look at the showcase or get the downloads coordinates from the npm page.

Memory footprint

Don't forget to activate gzip or Brotli on your server. Mozilla's pdf.js files are huge. Dropping IE11 support reduces the bundle size, but even so, the files add two megabytes. After minifying and gzipping this drops to roughly 300-400 KB. Even so, it's a good idea to use lazy loading, maybe backed up by a clever preloading strategy.

License

I've published the library under an Apache V2 license. In other words, you can use it for your projects, including commercial projects.

Wrapping it up

Judging from the community feedback, ngx-extended-pdf-viewer is fairly stable and production-ready. There are a few open bug tickets. Huge PDF files make the search function slow, and to my surprise, some people have trouble with printing. That's unexpected because the PDF viewer renders the PDF file as images and prints them using the standard browser print method. That sounds like a bullet-proof solution, but it isn't. I suspect printer drivers cause the trouble.

Other than that, it's a solid and proven solution. Nonetheless, there's also room for new ideas and improvements. Feel free to open tickets on the bugtracker. I'm also looking forward to your pull requests!