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



Join my special Ionic School today:
Video Courses, Project Templates, Community & the Support you deserve to learn Ionic!

#############################

Want to read instead of watch? Here’s the full tutorial:

Want more tutorials? Here you go!

Just getting started? Take my 7 Day Ionic Crash Course:

#############################

My Private Daily Vlog:…

26 Comments

  1. Hi, I have a problem, i can't open my pdf when i click on the button and i have this message in the console:

    Native: tried calling Document Viewer.viewDocument, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator (common.js:290).

    But i try the "geolocation" plugin and he works. Someone have an idea ? Thanks

  2. Hello! Thank you for another great video! Would like to ask do you still recommend using FileTransfer plugin or it is deprecated indeed and some js native tools should be used instead?

  3. hey simon , why this tutorial not works with me , can you help me please ?

  4. Thank you, very nice and clear tutorials ! Unfortunatey the filePath does not work for me…
    So for those who have the same problem, here is the path that worked for me:
    let filePath = this.file.applicationDirectory + 'public/assets/';

  5. Worked great. Nice to know the FileOpener is the trick for Android. Gross that the DocViewer plugin won't just implement that API.

  6. If somebody have errors with ios with this line fix the problem:
    let url2 = entry.toURL();
    url2 = url2.replace("file:///","/");

  7. ionic ios app crash when open pdf and throw error
    * Assertion failure in -[UIApplication _createStatusBarWithRequestedStyle:orientation:hidden:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKitCore_Sim/UIKit-3901.4.2/UIApplication.m:5330
    * Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'App called -statusBar or -statusBarWindow on UIApplication: this code must be changed as there's no longer a status bar or status bar window. Use the statusBarManager object on the window scene instead.'

  8. I faced some challenges when implementing this code, so I wanted to add what worked for me below. I hope it helps someone.

    ———- @2:20 ———-
    import { File } from '@ionic-native/File/ngx';

    … should be:

    import { File } from '@ionic-native/file/ngx';

    The capital F caused a failure for me and took a long time to hunt down.

    All of my imports in src/app/app.module.ts looked like this:
    import { File } from '@ionic-native/file/ngx';
    import { FileOpener } from '@ionic-native/file-opener/ngx';
    import { FileTransfer } from '@ionic-native/file-transfer'; // Tutorial called for /ngx but that failed
    import { DocumentViewer } from '@ionic-native/document-viewer/ngx';

    ———- @4:03 ———-
    In home.page.ts, you need to import DocumentViewerOptions:
    import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer/ngx';

    All of the imports I added looked like this:

    import { Platform } from '@ionic/angular';
    import { File } from '@ionic-native/file/ngx';
    import { FileOpener } from '@ionic-native/file-opener/ngx';
    import { FileTransfer } from '@ionic-native/file-transfer'; // Tutorial called for /ngx but that failed
    import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer/ngx';

    ———- Misc ———-
    In case versions matter, here's some excerpts from my package-lock.json:

    "@ionic-native/document-viewer": {
    "version": "5.18.1-beta.5",

    "@ionic-native/file": {
    "version": "5.18.1-beta.5",

    "@ionic-native/file-opener": {
    "version": "5.18.1-beta.5",

    "@ionic-native/file-transfer": {
    "version": "5.18.1-beta.5",

  9. I get application / pdf file from my API, and on http get … {responseType: 'blob'}). ToPromise () …

    I tried this way passing the blob to stores in a pdf but I will retonarna invalid pdf, could you give me a hint ???

  10. Good day Simon! Great tutorial, thank you very much. But I have a question, how to convert a pdf file to a base64 format in ionic 4?

  11. Simon Good Tutorial,
    But i wanted something like –
    View PDF from specific URL without Downloading the file in Ionic 3 Android App.?

    I searched & worked around with Iframe & ng2-pdf-viewer plugin but No Success,!

    Guide me to Best Possible way around to achieve a solution to Problem Statement I mentioned Above,

  12. Hi Simons! Thanks for a to the point tutorial, it works for me. I have a question. I am new to ionic framework. I am creating an ionic4 application "book library" for both ios and android. i have multiple books in pdf and audio format. Could you please suggest me where i can keep my data to download it? is it good solution to create SQLite database? what is the difference between SQLite database and ionic storage? I want that once the user download the book, it saves locally for offline access. Thanks in Advance!

  13. Hi, This is working perfectly fine on iOS. But I have a problem with Android 9. It doesn't open the pdf. But it works nicely with Android 7 and 8 devices. Any clue?

  14. for those who are looking for a better alternative for android you can convert the pdf files to html , use javascript viewer,(ng2 pdf viewer in my case) and also there is a cool library called pdftron alhough this one will cost u money.

  15. Hello nice tutorial Simón, I have a question, I made an inappbrowser app, I use it to navegate in a laravel web app, it works propertly but in the web app there is a print button to generate a pdf and then to print, but when I push the button nothing happens I hope you can advice me about it thank you a lot… I need some help. Usually, in a normal browser when I push the print button IT generates a pdf ready to print. The same thing happens when I try to download a file that previously was uploaded with the inappbrowser app

  16. Good day Simon! This is so useful but I have a question: do you have a video where explain how to create a pdf file since ionic 4!?

    Thanks in advance!

  17. Nice video. It's a shame that we can't get the same beautiful experience in android…What if a pdf app is not on the device when trying to use file opener? Do you think we can use iframe or a regular angular pdf plibraryugin instead?

Leave a Reply

Your email address will not be published. Required fields are marked *