pdf is not opening in cordova themeableBrowser

Question

I saw some tutorial, in ionic 2 to open the pdf which should not be downloadable to user. So i found this Git hub repo.

Now when I download the project and when I run the sample app.. the pdf is not opening in themeableBrowser..

It has all browser feature like :

inAppBrowser

themeableBrowser

AndroidPDF

But when I tried inAppBrowser it works fine. But I need to work with themeableBrowser becasue i need a pdf should not be a downloadable. if any one clear this issue of mine why this is not opening in android platform.

you can download the repo and you can use that.

please help me out. its a only source that i found to work.. Thanks

Answer 1

As stated on the ionic docs you can use this themeablebrowser which is same as the cordova themeablebrowser you are trying to use.

Here is the working code snippet:

In home.html file:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <button ion-button (click)="test()">Test browser</button>
</ion-content>

In home.ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native';
import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    constructor(public navCtrl: NavController, private themeableBrowser: ThemeableBrowser) {

  }

  test() {
      const options: ThemeableBrowserOptions = {
          statusbar: {
              color: '#ffffffff'
          },
          toolbar: {
              height: 44,
              color: '#f0f0f0ff'
          },
          title: {
              color: '#003264ff',
              showPageTitle: true
          },
          backButton: {
              image: 'back',
              imagePressed: 'back_pressed',
              align: 'left',
              event: 'backPressed'
          },
          forwardButton: {
              image: 'forward',
              imagePressed: 'forward_pressed',
              align: 'left',
              event: 'forwardPressed'
          },
          closeButton: {
              image: 'close',
              imagePressed: 'close_pressed',
              align: 'left',
              event: 'closePressed'
          },
          customButtons: [
              {
                  image: 'share',
                  imagePressed: 'share_pressed',
                  align: 'right',
                  event: 'sharePressed'
              }
          ],
          menu: {
              image: 'menu',
              imagePressed: 'menu_pressed',
              title: 'Test',
              cancel: 'Cancel',
              align: 'right',
              items: [
                  {
                      event: 'helloPressed',
                      label: 'Hello World!'
                  },
                  {
                      event: 'testPressed',
                      label: 'Test!'
                  }
              ]
          },
          backButtonCanClose: true
      };

      const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://docs.google.com/viewerng/viewer?url=www.pdf995.com/samples/pdf.pdf', '_blank', options);
  }

}

And in app.module.ts file add ThemeableBrowser from @ionic-native/themeable-browser to the providers.

After adding your app.module.ts file should look like:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ThemeableBrowser } from '@ionic-native/themeable-browser';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ThemeableBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Thats all the additions you need in your started ionic app for your themeable browser to work.

Tested it on android emulator.