FileOpener and DocumentViewer are not working

Ionic Native
1

Hello Everyone,

I created a function that will get the PDF Blob file from the server and save it to phone’s storage. Now, I want the user to be able to open it once the file was downloaded. I tried using FileOpener (cordova-plugin-file-opener2) but it didn’t work without showing any errors. Same with trying the DocumentViewer (cordova-plugin-document-viewer) but it also didn’t work without showing any errors. I am testing the app on an actual mobile phone and tried to alert the error if there’s any since the moblie phone have no consoles but it doesn’t display any errors. I don’t know how to make it work or if there is anything that I can use aside from FileOpener and DocumentViewer. Btw, here are my codes.

FileOpener

              this.fileOpener.open(filePath, 'application/pdf').then(response => {
                this.toastSrvc.presentToast(response);
              })
              .catch(error => {
                this.alertCtrl.create({
                  title: 'Error opening the file',
                  message: error,
                  buttons: [
                    {
                      text: 'Close',
                      role: 'cancel',
                      handler: () => {
                        console.log('Alert Closed!');
                      }
                    }
                  ]
                }).present();
              });

DocumentViewer

this.documentViewer.viewDocument(filePath, 'application/pdf', options, this.onShow, this.onClose, this.onMissingApp, this.onError);

  onShow() {
    this.alertCtrl.create({
      message: 'Show'
    }).present();
  }

  onError() {
    this.alertCtrl.create({
      message: 'Error'
    }).present();
  }

  onMissingApp() {
    this.alertCtrl.create({
      message: 'Missing App'
    }).present();
  }

  onClose(){
    this.alertCtrl.create({
      message: 'Close'
    }).present();
  }

I hope someone can help me with this. Thank you in advance :slight_smile:

2

I had to consume the pdf as a blob and save it to the device, before I could open it (rather than opening it directly from the url). I used File.writeFile(), which will return the document.

3

Thank you for your hint but I already tried doing that if you mean it this way

    this.file.writeFile(filePath, fileName, pdfFile, {replace: true}).then(fileEntry: FileEntry => {
      let alert = this.alertCtrl.create({
        title: 'Export',
        message: 'file successfully saved!',
        buttons: [
          {
            text: 'Open File',
            handler: () => {
                this.fileOpener.open(fileEntry, 'application/pdf').then(response => {
                  this.toastSrvc.presentToast(response);
                })
                .catch(error => {
                  this.alertCtrl.create({
                    title: 'Error opening the file',
                   message: error,
                   buttons: [
                     {
                       text: 'Close',
                       role: 'cancel',
                       handler: () => {
                         console.log('Alert Closed!');
                       }
                     }
                   ]
                 }).present();
              });
            }
          }
        ]
      });
      alert.present();
    });

Or maybe I am missing something. I really don’t know what to do. Been stuck here for a while now. I am open your suggestion. Thanks again :slight_smile:

4

I do something like this:

let fileName = 'myFile.pdf';
let documentDirectory = this.platform.is('android') ? this.file.dataDirectory : this.file.documentsDirectory;
this.httpClient.get(url, headers).then(data => {
    let blob = new Blob([data], {type: 'application/pdf'});
    this.file.writeFile(documentDirectory, fileName, data).then(data => {
       resolve(documentDirectory + filename);
});
//Now you can do all your file opening stuff

That is how I got it to work at least anyway!

5

I can get the PDF Blob File from the server and save it to the phone storage successfully, my only problem is opening the downloaded file.

6

Hey,

Try this to access ‘www/assets’ for Android device:

let filePath = this.file.applicationDirectory + 'public/assets/';