0

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

Community
  • 1
  • 1
venky
  • 139
  • 4
  • 12
  • Have you tried exact example from this [themeable browser repo](https://github.com/initialxy/cordova-plugin-themeablebrowser) – warl0ck May 09 '17 at 18:03
  • yes, same only... – venky May 09 '17 at 18:13
  • Just comment all of the instances of `PdfDisplayPage` on `app.module.ts` and `home.ts` for your app to work – warl0ck May 09 '17 at 18:15
  • i tried bro already....i can able to access the app. but while run,`themeable browser` is not working at all... both in browser and device...have u tried does its working ?? – venky May 09 '17 at 18:21
  • @warl0ck does its works for you ?? – venky May 09 '17 at 18:30
  • Inappbrowser or themeablebrowser wont work on browser for it you will have you test your app on android or ios. let me check if it works on android – warl0ck May 09 '17 at 18:32
  • i checked in android device. it doesn't work thats why i asked this doubt – venky May 09 '17 at 18:33
  • instead try using simple example here on [ionic docs](https://ionicframework.com/docs/native/themeable-browser/) see if this helps and dont forget to open the browser window with `browser.show()` function – warl0ck May 09 '17 at 19:00
  • @warl0ck did u have any source project based on this ..and does this Themeable browser will not have the download option for user right ?? – venky May 09 '17 at 19:34
  • can you please give me source code for that link that u have provided ???so that i will check it work wheather it is working r not ?? – venky May 09 '17 at 19:35
  • @warl0ck hi, i done with ionic 1 here my post. but don't know how can i code ....http://stackoverflow.com/questions/43883108/ionic-1-themeable-browser-not-opening-in-android-device – venky May 10 '17 at 03:26
  • @warl0ck here my sample project that i am working https://drive.google.com/file/d/0B97QeJKOjA1LWE94RXo3U3g1Ulk/view?usp=sharing – venky May 10 '17 at 03:27
  • Nope I dont have any sample source code but I can write it maybe give me some time – warl0ck May 10 '17 at 05:32
  • I am afraid I dont know ionic 1 as it uses angular 1 which I have never worked with I can try to give sample code for ionic 2 maybe if that is fine – warl0ck May 10 '17 at 05:36
  • ionic 2 sample okay bro...... – venky May 10 '17 at 05:38

1 Answers1

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.

warl0ck
  • 3,356
  • 4
  • 27
  • 57
  • but when i run this same code i got some error previously, and in so they said its ionic 3 . if we use this `mport { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser'; ` – venky May 10 '17 at 11:46
  • if you share the demo project that u have done it will be very help full for me..to see and understand the code.... – venky May 10 '17 at 11:47
  • yes I have latest version of ionic installed i.e. ionic 3.1.1 you just need to upgrade your ionic project without making any change to your existing code-base. this video might help https://www.youtube.com/watch?v=oQJMUOznMrA – warl0ck May 10 '17 at 11:48
  • here is the src folder https://drive.google.com/open?id=0BzQtERw_QqwEcVBOcldOYjhSUjQ for my demo app – warl0ck May 10 '17 at 11:49
  • so now i will start with new project of `ionic start demoapp blank --v3` right ??.. then i need to replace my src folder to urs and i need to run ?? – venky May 10 '17 at 11:51
  • bro can u send me the full file with deleteing the node_module.. so that i will also comes to know what are the plugins, package.json that we have upgrade....every thing will comes to know ?? – venky May 10 '17 at 11:53
  • just watch the video I posted above to upgrade your project. – warl0ck May 10 '17 at 11:53
  • sorry for asking again bro..today is my last day for this... its bit urgrnt.. if u send me the full project with deleting the `node+module` i will show with my boss and will get some time to understand and code it in my project !!!plz bro – venky May 10 '17 at 11:54
  • what are the plugins that i need to install ??? inappbrowser , themeable browser ???? right ?? – venky May 10 '17 at 11:55
  • four commands 1. `npm install` 2. `ionic cordova platform add android` 3. `ionic plugin add --save cordova-plugin-themeablebrowser` 4. `npm install --save @ionic-native/themeable-browser` and you are good to go – warl0ck May 10 '17 at 11:57
  • the main motto of this browser that i need to make is, i need to load the pdf without download option. i tried in ionic 1 not able to get, then i moved to ionic 2 not able to found. now in ionic 3 i am trying. so in this browser can i change the header tool bar to hide the download option for user ??? – venky May 10 '17 at 12:03
  • bro still i can see the download option of the pdf bro in this browser. i run it in android device ..... – venky May 10 '17 at 12:05
  • if you use `https://docs.google.com/viewer?url=[url_pdf]` then when its opens the pdf in google docs there is no option for the user to download check thid [question](http://stackoverflow.com/questions/7437602/how-to-display-a-pdf-via-android-web-browser-without-downloading-first) thats the exact link I have used and your question asked how to make themeable browser work – warl0ck May 10 '17 at 12:05
  • we used like this `https://docs.google.com/viewerng/viewer?url=www.pdf995.com/samples/pdf.pdf` – venky May 10 '17 at 12:08
  • `viewerng` this we included in our code....but the example code that u have given know..in that it was not there ? – venky May 10 '17 at 12:09
  • I think its the same either way change the link, both does not give the option to download pdf to user. I hope now this answers your questions – warl0ck May 10 '17 at 12:11
  • yes, but there is option to save in drive ......of google user bro..now what should i need to do for that ??... at above of pdf download is okay. but user can login / sign in through gmail and they can save to their google drive itseems bro !!1 – venky May 10 '17 at 12:13
  • that was not part of your question, I suggest you ask different question for someone else to answer this – warl0ck May 10 '17 at 12:14
  • is there any thing to disable the sign in button or disable the drive button bro ?? – venky May 10 '17 at 12:15
  • yes apparently there is check this out https://thenextweb.com/google/2015/07/14/google-drive-now-lets-you-prevent-others-from-downloading-printing-and-copying-shared-files/ – warl0ck May 10 '17 at 12:20