How to Open PDF Files with Ionic 4 on Android and iOS

ionic-4-pdf-files

When you want to open files inside your Ionic app you’ll most likely have to interact with the local filesystem in some way – something that’s not always easy and obvious from the outside.

In this Quick Win we will build an app to open both a PDF that we supply with our app and one that we first download and then display. In contrast to the previous version for Ionic 3 we will now have a switch between iOS and Android to handle things differently.

With the previous Document Viewer plugin we had to use a specific app on Android, so this time we are rolling with a more general plugin that will automatically use your preferred reader.

Setting up our App with all Packages

Although the functionality of this example is quite limited we need a bunch of plugins. Here’s why:

  • File: Copy files around to make them available for opening
  • File Opener: Open files, our fallback for Android
  • File Transfer: Download files without CORS issues
  • Document Viewer: Preferred way to display files on iOS, looks better than the File opener

So on iOS we continue to use the plugin from the last Quick Win, and for Android we implement the File Opener. Let’s start by running all of the commands below:

Next we need to add all of them to our app/app.module.ts just like we are used to, so go ahead and insert:

Because we don’t really need any view we’ll also cover that part by now so we can focus on the important functions afterwards. Just add two buttons and we are good to go, so change your app/home/home.page.html to:

Now we are ready to perform some magic!

Open Local PDF

First of all you need a PDF file to test things out. Actually you could also open different files but then you’ll have to change the mimetype as well.

I’ve added a file called 5-tools.pdf into the assets folder of my app so copy some to that place as well now.

For Android, the File Opener was not able to open that file directly (at least in my tests) and we have to copy that file to a directory where we can open it. If you don’t want to pile up your stack of old files you should also add a removeFile function once you are done with the file!

Once to copy operation is finished we can easily access the correct URL and pass it to the file opener.

For iOS, we don’t need the extra step (although it would work as well, just like the file opener would) so we can directly pass in the path to our local file.

The path to the file we added to our assets folder is actually constructed using the file plugin again and then adding www/assets so it’s exactly like the folder you see in your IDE when using live reload!

Now go ahead and change your app/home/home.page.ts to:

We could also leave out the switch and perform the same steps for iOS, however the view is really a lot better with the document viewer so try to stick with that.

Download and Open PDF

Now that we can open files from our app bundle, we might also need to download and display files from time to time. While the File Transfer plugin in general is deprecated, we can still use it like always as it works great and overcomes any CORS issues that we would get otherwise if we were to use the standard HTTP client.

If you don’t want to go with the File Transfer plugin you can also use the native HTTP package and make the calls through that plugin but you’ll then also have to implement saving the file data inside the system yourself.

In this example we can now pass our download URL to the file transfer package and download the file to our apps data directory. Afterwards we can use the toURL() function on the file entry to receive the right URL to the file.

This URL can be used for both iOS and Android, but just like before we will use the document viewer for iOS and the standard file opener for Android.

Go ahead and add the function inside your HomePage class below the previous function:

Now you can test out your app on a device, remember Cordova plugins don’t work inside your browser.

Android Quirks

Not completely related to the content but the Android build failed for me when using these plugins so I wanted to add a little note.

First, I had to downgrade my platform because Cordova 7 didn’t work out well so I ran:

But that’s not enough, due to some libraries being included by our File plugin we need to make a little hack as well. I found this hack inside this Github issue and the change you need to apply is adding the below snippet at the end of your platforms/android/build.gradle:

This is not a great way because that folder is most likely not under version control for your team and also not synced with your other machines – but at least you can build an APK afterwards again!

This might be fixed at some point in the future when Cordova Android 7 works and the plugins have been updated.

Conclusion

If you understand the general behaviour behind the file system and how the URL works you can easily open or copy all kind of local information and pass the information to other plugins.

In our case we used a PDF file but other files would work as well, just make sure you get the path, ending and filetype right and you shouldn’t run into any trouble.

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

Read Next..

How to Create Basic Ionic Storage CRUD Operations The Ionic Storage package is a great wrapper around the local storage or SQLite database inside your Ionic app, but when it comes to basic functionali...
Building an Accordion List with Ionic While the Ionic list with all it's options and sliding elements is a great component, sometimes you need a more advanced behaviour like a classic acco...
How to Show/Hide Elements Based on User Roles with Ionic When you build an authentication system for your app it's very likely that you also have some sort of role management. If you want to show or hide dif...