Open & Download PDF Files with Ionic

Working with PDFs or other files can sometimes be a bit tricky, especially when the WKWebView on iOS handles stuff differently or you only get some binary data from an API. There are a many things that can go wrong, but let’s take a look at an easy way to open and display PDFs with Ionic.

In this Quick Win we will handle both cases: Open a PDF that exists in the assets folder of our app and also downloading and displaying data from anywhere on the web as a file to our device.

ionic-pdf-files
This is how the final result of our opened PDF will later look like on a device!

Create the PDF Viewer App

First of all we start with a blank new Ionic app and install both the document viewer and also the file transfer plugin. I’ll spend a few more words on why we picked these 2 at the end of this Quick Win, but for now go ahead and run:

To make sure we can use them also add them to your app/app.module.ts like this:

For this example I’ve also added a PDF file simply to the assets/ folder of our Ionic app and also uploaded a PDF to my Blog which is available here.

Note: This is a PDF I created for my second project, Lifestyle Business Transformation. If you’re interested in my journey and life behind all of this, make sure to check it out and subscribe!

Displaying PDF Files

Back to the topic, we need a way to trigger both of our actions so add two buttons to your pages/home/home.html like:

I guess you would have achieved that alone as well!

Next, the actual logic for opening PDFs. For the local file, we can directly pass the path of the file to the document viewer. You can also add more options, for our case we’ll just add a title and set the mimetype that will be opened.

At this point we could have also used the FileOpener plugin, but this plugin won’t load our local assets on iOS with the WKWebView, therefore I went this route.

To display our remote PDF file we first need to download it. At this point I also tried the standard HTTP call, which results in some CORS issues due to WKWebView. This problem can be fixed using a native HTTP library which actually works quite good!

But, the result was still a PDF with blank pages and what really works the best is the Cordova File Transfer plugin which directly downloads a file and creates it inside your apps folder (or at any other path). Still, a switch between Android and iOS is needed so we can open the PDF in the next step.

Once the file is downloaded, we can use the URL of the new created file and pass this again to our document viewer!

Go ahead and change your pages/home/home.ts like this:

Your app is now ready, but of course this won’t work inside your browser as we use Cordova plugins so make sure to test the functionality on a real device.

Additions

By now you might say that Cordova File Transfer plugin is deprecated and you are right to some degree. They are sunsetting this plugin, but it still works great and likely will over the next time as the implementation is fine.

They simply decided that given the improved APIs it’s not needed anymore, but handling all of this on our own is still not super comfortable with Angular. If you have a good implementation please leave a link below and I’ll add it to the Quick Win as well!

Also, the File Opener Plugin is great in general but doesn’t work 100% with WKWebView so try if it works for your case, and otherwise go with the Document Viewer like explained in this post. Also, I feel in general the viewer has more options than the standard opener which displays some files in a rather dumb way.

You can also find a video version of this Quick Win below!