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

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.

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

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!

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.

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 packageand 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.