DocumentViewer not working with Ionic 3

Question

I tried to work with ionic/cordova plugin here.

So I put this code in my Page:

  showDocument() {
    var options: DocumentViewerOptions = {
      title: 'A book',
      documentView: { closeLabel: '' },
      navigationView: { closeLabel: '' },
      email: { enabled: true },
      print: { enabled: true },
      openWith: { enabled: true },
      bookmarks: { enabled: true },
      search: { enabled: false },
      autoClose: { onPause: false }
    }
    this.docViewer.viewDocument('assets/arabic.pdf', 'application/pdf', options);
  }

And a simple button to launch it in the html page:

<ion-content>
  <button  ion-button round (click)="showDocument()">
    Read
  </button>
</ion-content>

But I can't see anything in the emulator (since it is not possible to run it on the browser)

Ionic Info is there:

UPDATE:

This is what I get when debugging with my device and chrome devtools:

UPDATE 2:

I have tried to work with absolute paths but I have got null value, I have made those changes:

import { File } from '@ionic-native/file';
declare let cordova: any;
//staff

pdfSrc: string = cordova.file.applicationDirectory + 'assets/arabic.pdf';

//staff
console.log(this.pdfSrc);
this.document.viewDocument(this.pdfSrc, 'application/pdf', options)

But see what I have got:

any errors in the console using [remote debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)? — Suraj Rao, Oct 16 '17 at 12:27
actually i have no much idea about remote debugging. I will see how to work with it — Houssam Badri, Oct 16 '17 at 12:29
Yes, I added an Alert and it worked. Is there may be a problem with my including? — Houssam Badri, Oct 20 '17 at 07:59
it says relative urls are not supported..maybe try absolute url? https://stackoverflow.com/questions/9073953/phonegap-on-ios-with-absolute-path-urls-for-assets — Suraj Rao, Oct 23 '17 at 08:59
Thanks a lot, you made me more near to the solution. I tried with absolute paths but I have got null value. See update please — Houssam Badri, Oct 23 '17 at 10:54
The new NPE happened because there is no directory created!, BTW if you are reading from assets `assets/arabic.pdf` that's mean your source already compiled with apk so you don't need to get it from `applicationDirectory`. — , Oct 23 '17 at 12:10
Thanks Ibrahim. Do you have any idea how can I fix it then. I'm stack — Houssam Badri, Oct 23 '17 at 13:00
@HoussemBdr you may follow this https://github.com/sitewaerts/cordova-plugin-document-viewer — , Oct 23 '17 at 16:41
@HoussemBdr you should really use the example they provide here: https://github.com/sitewaerts/cordova-plugin-document-viewer-sample-app/blob/master/www/js/common.js Also i would suggest you always do all those on ViewDidLoad so you are sure cordova and all the others are properly initialized. If you need more explanation please tell me. — Ernesto Ulloa, Oct 26 '17 at 14:09
@ErnestoUlloa thank you, but I didn't also worked, I tried with that example. But don't you see, also, that it is coded in ionic 1 style? — Houssam Badri, Oct 28 '17 at 08:27

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

This does not answer your question directly, but is a workaround for getting PDFs to display.

I had trouble with a lot of plugins for reading PDFs, so I ended up just using a Mozilla project called PDF.js to render the PDF directly in the browser on the Android platform, and on iOS they are displayed natively in the browser. To handle it like a viewer, separately from the rest of my app, I used an in app browser window.

There are some code examples for PDF.js here: http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

Hope that helps someone!

DocumentViewer not working with Ionic 3

1 Answers1