How to view local PDFs in Ionic on Android and iOS

Update: I wrote a provider that uses Document Viewer on iOS and In App Browser on Android:

This method has only been tested with local PDF files stored in your project src/assets/ folder. No idea if it would work with remote PDFs, probably not on Android. Also, I’m very much a beginner so I may well adopt the wrong terminology or do things the ‘wrong’ way. Whatever, it works and that’s what matters.

I tried various methods to find something that worked across both devices All methods require Ionic Native File:

Ionic Native File Opener. Nope. On iOS, rather than the actually PDF content, it shows a blank grey screen with the PDF file name. Not the behaviour that others describe but I know the paths and mime type are correct so maybe a bug in the latest build of something. Dunno.

Ionic Native Document Viewer. Nope. Works, but on Android it prompts you to download a specific PDF viewer. Not really a big deal but I’d prefer to use the existing, default apps. Otherwise it works really nicely.

Ionic Native In App Browser. Yes. After some messing around to get the paths correct this option opens the file in the default PDF viewer on Android and in the In App Browser on iOS. I’d prefer to have a cleaner iOS experience with no address bar but it works well enough, you can pinch, zoom etc and both Android and iOS have clear navigation back to your app.

How to do it

This assumes you have a PDF called pdf.pdf in src/assets/ so the full path in your project is src/assets/pdf.pdf.

Install Ionic Native File and In App Browser. Add both to your app’s module (app.module.ts):

import { InAppBrowser } from '@ionic-native/in-app-browser';
import { File } from '@ionic-native/file';

And in the same file, add them to your providers:

providers: [
StatusBar,
SplashScreen,
InAppBrowser,
File,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

In your page template (blah.html), add something to trigger your function:

<button ion-button secondary (click)="openPDF()">Open PDF</button>

And then in your page component (blah.ts), import Ionic Native File, In App Browser, Platform, and normalizeURL:

import { NavController, normalizeURL, Platform } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { File } from '@ionic-native/file';

Make sure they’re injected in your constructor:

constructor(public navCtrl: NavController, private iab: InAppBrowser, private file: File, public plt: Platform) {}

And then here’s your function. This should be abstracted somewhere so you only need the function once in your app and pass in the document name but if you’ve only got one PDF or really enjoy copy and pasting this will work fine. There should definitely also be some error checking.

openPDF() {
 // get the platform path
 let filePath = this.file.applicationDirectory + 'www/assets/';
 // for android copy the file to a shared space so the PDF reader app can access it
 if (this.plt.is('android')) {
  let theMove = this.file.copyFile(filePath, 'pdf.pdf', this.file.externalDataDirectory, 'pdf.pdf');
  // update the path variable
  filePath = this.file.externalDataDirectory;
 }
 // and open the PDF
 const browser = this.iab.create(normalizeURL(filePath + 'pdf.pdf'), '_system', 'location=yes');
}

This is the only method I found to use the native apps to open a local PDF on both iOS and Android but if anyone knows an alternative I’d love to hear it.