Open PDF using inappbrowser on Android Devices - Ionic 3

Ionic Native
1

Hi,

I am trying to open one PDF returned by a Rest service on a Android device using Ionic 3/inappbrowser plugin, but it doesn´t work.
In the ionic emulator (ionic serve -c) and Chrome browser it works fine.

My code is:

      var objectUrl = URL.createObjectURL(data); //data is the blob PDF returned

      var browser = this.iab.create(
        objectUrl,
        '_blank',
        'location=yes,' +
        'toolbar=yes,' +
        'enableViewportScale=yes,' +
        'closebuttoncaption=Close PDF,' +
        'hardwareback=no'
      );
      browser.show();

      URL.revokeObjectURL(objectUrl);

I´ve tried to use this other code expecificly to Android, but it doesn´t work to:

      this.blobPdf = data; // Lets store the pdf Blob
      let filedir = this.file.dataDirectory;
      this.file.writeFile( //save PDF
        filedir,
        "FluxoCaixa.pdf",
        this.blobPdf,
        { replace: true }
      ).then(() => {
        this.fileOpener.open( //open in native PDF
          filedir + 'FluxoCaixa.pdf',
          'application/pdf'
        ).then(() => {
        }).catch(e => alert('Open error' + e));
      }).catch(e => alert('Save error' + e));

My configuration:

Cli packages:
@ionic/cli-utils : 1.16.0
ionic (Ionic CLI) : 3.16.0

Global packages:
cordova (Cordova CLI) : 7.1.0

Local packages:
@ionic/app-scripts : 3.0.0
Cordova Platforms : android 5.1.1
Ionic Framework : ionic-angular 3.7.1

System:
Android SDK Tools : 25.2.2
Node : v8.6.0
npm : 5.5.1
OS : Windows 7

package.json:

{
“name”: “FinanceMovel”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “4.4.3”,
"@angular/compiler": “4.4.3”,
"@angular/compiler-cli": “4.4.3”,
"@angular/core": “4.4.3”,
"@angular/forms": “4.4.3”,
"@angular/http": “4.4.3”,
"@angular/platform-browser": “4.4.3”,
"@angular/platform-browser-dynamic": “4.4.3”,
"@ionic-native/core": “4.3.0”,
"@ionic-native/file": “^4.3.3”,
"@ionic-native/file-opener": “^4.3.3”,
"@ionic-native/google-plus": “^4.3.1”,
"@ionic-native/in-app-browser": “^4.3.3”,
"@ionic-native/secure-storage": “^4.3.2”,
"@ionic-native/splash-screen": “4.3.0”,
"@ionic-native/status-bar": “4.3.0”,
"@ionic/storage": “^2.0.1”,
“cordova-android”: “^5.1.1”,
“cordova-ios”: “^4.5.1”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-file”: “^4.3.3”,
“cordova-plugin-file-opener2”: “^2.0.19”,
“cordova-plugin-inappbrowser”: “^1.7.1”,
“cordova-plugin-ionic-webview”: “^1.1.11”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “git+https://github.com/apache/cordova-plugin-statusbar.git”,
“cordova-plugin-whitelist”: “^1.3.1”,
“cordova-sqlite-storage”: “^2.0.4”,
“ionic-angular”: “3.7.1”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.4.3”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
"@ionic/app-scripts": “3.0.0”,
“typescript”: “2.3.4”
},
“description”: “An Ionic project”,
“cordova”: {
“platforms”: [
“ios”,
“android”
],
“plugins”: {
“cordova-plugin-device”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“cordova-sqlite-storage”: {},
“cordova-plugin-file”: {},
“cordova-plugin-file-opener2”: {},
“cordova-plugin-inappbrowser”: {}
}
}
}

Any ideas?

Thanks in advance.
Paulo

3

I discovered that on Android 7 the Android code works, but on Android 5.1 doesn´t.
Any ideias?
Thanks

4

In other post I saw a suggestion to save the file at the download folder at sdcard and open it manually.
Trying that i discover that there was a native viewer in my Android 7 phone, but not in my Android 5.1 phone.
I downloaded the google PDF viewer and the PDF could be opened.

The final code is:

if (this.plt.is(‘android’)) {
// lets save and then open the file
this.blobPdf = data.retorno; // Lets store the pdf Blob

      let filedir = this.file.externalCacheDirectory; //'file:///storage/sdcard0/Download/'
      this.file.writeFile(filedir,'file.pdf', this.blobPdf, { replace: true }
      ).then((arquivo) => {

        this.fileOpener.open( filedir + 'file.pdf', 'application/pdf'
        ).then(() => { } ).catch(e => alert('Open error' + e));
      }).catch(e => alert('Save error' + e));
    } else use inappbrowser.

Thanks.
Paulo