The Not At All Definitive Guide To Opening PDF Files In Ionic 2

Ryan Corbin

Opening PDF’s inside an application is tricky sometimes, but the beauty of Ionic is that a solution is never far out of reach. Despite that bit of enthusiasm the landscape for this problem is often hard to navigate. After a project where we had to work with just about every solution under the sun I bring to you this not at all definitive guide.

To go along with your reading we’ve created a sample application at:

https://github.com/TheCorbin/PDFExample

A flowchart would be helpful here, but it would spin out of control quite quickly. There are a lot of questions you have to consider when picking a PDF opening strategy, here are a few:

  1. Does it work on Android?
  2. Can we customize the browser with styling and buttons?
  3. Online and offline documents?
  4. Does it support native gestures?
  5. Can you extract the PDF file?

Note: Extraction of the PDF file is ALWAYS possible on Android with enough effort.

InAppBrowser

https://github.com/apache/cordova-plugin-inappbrowser

  1. Does it work on Android? - Halfway. With a google Docs viewer, and then only online PDF documents.

  2. Can we customize the browser with styling and buttons? - Styling yes, custom buttons/functionality not so much

  3. Online or offline documents? - On iOS it can, Android not so much

  4. Does it support native gestures? - yes

  5. Can you extract the PDF file? - No, the file is kept on the device, but there is an optional location bar that would help Android extractors

The Ionic Native preferred solution has a number of advantages but also some severe disadvantages when opening PDF. On iOS the situation is ideal and PDF’s open with ease. Simply provide it with the location, whether online or offline, and the PDF’s open with clickable links inside the document and native gestures like pinch, double tap, and scroll.

Unfortunately Android’s webview doesn’t support opening PDF files. One simple hack used by many is to view the PDF through a google docs viewer. To do this simply prepend the usual URL with:

'https://docs.google.com/gview?embedded=true&url='

And then encode your usual location that you would pass with EncodeURIComponent(location). The finished location would look like this:

'https://docs.google.com/gview?embedded=true&url=' + encodeURIComponent(location)

Unfortunately this solution does not work with files already downloaded to your device. If you have a solution to this problem please let me know.

Another disadvantage to the inAppBrowser is that it doesn’t allow much customization. Which leads me quite nicely to…

Themeable Browser

https://ionicframework.com/docs/v2/native/themeablebrowser/

  1. Does it work on Android? - Halfway. With a google Docs viewer, and then only online PDF documents.

  2. Can we customize the browser with styling and buttons? - Yes!

  3. Online or offline documents? - On iOS it can, Android not so much

  4. Does it support native gestures? - yes

  5. Can you extract the PDF file? - No, the file is secure in the app

The Ionic Themeable Browser is a fork of the inAppBrowser. With PDF viewing it shares the disadvantages of the inAppBrowser in that it works great on ios, and works only halfway on Android with a google viewer hack. The big difference is BUTTONS! There’s more to it than that, but that’s what I’m excited about. The browser comes with a number of standard button options out of the box such as close, back, forward, share, and a couple others. Where it really shines is the ability to add custom buttons. A custom button with a listener will allow you to implement all kinds of functionality within your code.

The Themeable Browser also allows you all sort of styling. All the icons are customizable and the browser has obvious and straightforward ways to insert CSS and Javascript.

Sitewearts Document viewer

https://github.com/sitewaerts/cordova-plugin-document-viewer

  1. Does it work on Android? - Not really, it throws to another app.

  2. Can we customize the browser with styling and buttons? - Possibly, but it would be difficult.

  3. Online or offline documents? - For Android see above, on iOS it’s only able to open offline documents.

  4. Does it support native gestures? - yes

  5. Can you extract the PDF file? - No, the file is secure in the app

There’s a lot to like about the Sitewearts Document viewer. This document viewer allows you to view documents in several different formats. The viewer also allows many button options, and probably with enough effort one could implement custom buttons.

Unfortunately the Sitewearts document viewer doesn’t work for a lot of use cases. First off, it explicitly says in it’s ReadMe that the document viewer doesn’t support online PDFs. Also, as explained in more detail in the Readme, the viewer is required due to licensing issues to throw to another app on Android. The app that they recommend is tightly coupled and smart enough to disable saving features…but leaving the app makes a lot of developers shudder.

The Sitewearts Document Viewer has some obvious drawbacks, but it also looks fantastic. If you have a situation where you only need to open on-device PDF’s on an iOS device it would definitely be useful.

Android Native PDF Viewer

  1. Does it work on Android? - Yes, of course, not at all on iOS

  2. Can we customize the browser with styling and buttons? - Only by editing the source. Put your Java hats on.

  3. Online or offline documents? - With our forked version it does both on Android

  4. Does it support native gestures? - Yes, add "showScroll:true" to show the scrollbars

  5. Can you extract the PDF file? - The App has sharing buttons, but they can be disabled/

The original:

https://github.com/Guutong/cordova-plugin-android-native-pdfviewer

While still looking for a solution to offline PDF’s on Android I stumbled upon this plugin. It’s pretty scarce on the documentation, but the viewer allows you to open PDF files that are on the device and even do a little bit of styling. Unfortunately it’s unable to open PDF’s that are located online. Therefore we forked the original and added support:

Forked version: https://github.com/TheCorbin/cordova-plugin-android-native-pdfviewer

This version was slightly modified and will open PDF files online or offline. We also removed buttons from the source that had to do with copying the link of the PDF and opening it in the browser.

Another note on the The Native PDF viewer is that a product of the rendering process disables embedded content and therefore all links within the content are disabled. In the end The Native PDF viewer seems to be limited in its uses, but currently it’s the best option for Android devices.

PDF.js

https://mozilla.github.io/pdf.js/

I’m going to throw away the formatting on this one because it isn’t like any of the other options. PDF.js will allow you to transcend the normal rules, but it’s not going to be easy. You can place a PDF inside an iFrame with PDF.js, but it’s at the expense of things other options take for granted. Native Gestures, links within content, and even support for PDF options like knockout groups are not available out of the box. Tread this path only if you really like reinventing the wheel.

Conclusion

There doesn’t seem to be a single PDF viewing option to unite them all yet, but with a mish-mash of these different options you should be able to create a solution that works in your use case.

Category: Development
Tags: ionic-2, PDF, Document Viewing
Have a thought or comment? Hit us up on twitter @bendyworks or on Facebook.