Ionic Native Document Viewer Plugin Not working

Hello,
I need your help in making this work. I tried as much as I could. The Native plugin doeskin seems to work. Here is my ionic environment info.

image

And I get the following error when I run my app on my android phone running on android 7.1.1

Thanks,
Mohan

Please post text as text, not as images.

1 Like

Sorry, here is the info

 ionic info

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v6.9.5
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

JS Errors

Documents Pressed.....
main.js:57445 Object {title: "My PDF", documentView: Object, navigationView: Object, email: Object, print: Object…}autoClose: Objectbookmarks: ObjectdocumentView: Objectemail: ObjectnavigationView: ObjectopenWith: Objectprint: Objectsearch: Objecttitle: "My PDF"__proto__: Object
main.js:57448 Docs Viewer [Object]0: ObjectautoClose: Objectbookmarks: ObjectdocumentView: Objectemail: ObjectnavigationView: ObjectopenWith: Objectprint: Objectsearch: Objecttitle: "My PDF"__proto__: Objectlength: 1__proto__: Array[0]
sitewaertsdocumentviewer.js:209 Error in SitewaertsDocumentViewer.canViewDocument():  JSON error
sitewaertsdocumentviewer.js:344 Error in SitewaertsDocumentViewer.viewDocument():  JSON error_logError @ sitewaertsdocumentviewer.js:344_onError @ sitewaertsdocumentviewer.js:349exec.url @ sitewaertsdocumentviewer.js:211callbackFromNative @ cordova.js:295processMessage @ cordova.js:1119processMessages 
@ cordova.js:1142t.invoke @ polyfills.js:3onInvoke @ main.js:4403t.invoke @ polyfills.js:3r.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ main.js:4394t.invokeTask @ polyfills.js:3r.runTask @ polyfills.js:3o @ polyfills.js:3

This issue suggests that you passed invalid arguments to canViewDocument().

@rapropos Here is the function that gets called when I want to launch the document. Please let me know what you think

showDocument() {
    console.log('Documents Pressed.....');
    var options: DocumentViewerOptions = {
      title: 'My PDF',
      documentView:{closeLabel:''},
      navigationView:{closeLabel:''},
      email:{enabled:true},
      print:{enabled:true},
      openWith:{enabled:true},
      bookmarks:{enabled:false},
      search:{enabled:false},
      autoClose:{onPause:false}
    }
    console.log(options);
    var optionsArray:DocumentViewerOptions[] = [];
    optionsArray.push(options);
    console.log('Docs Viewer', optionsArray);
    this.docViewer.viewDocument('assets/INV.pdf', 'application/pdf', optionsArray);
  }

I am sorry to attach this image but i dont have an option. As you see in the screenshot you see the file my assets folder.

image

Thanks,
Mohan

Based on the Cordova Plugin Docs I don’t believe you’re supposed to make options an array, so I’d try just passing in your options object.

1 Like

Hi,

This is my implementation and now works fine, I hope this need you.
My app gets pdf from base 64 in JSon format.

public getPDF(dataBlob) {

let blob: Blob = this.b64toBlob(dataBlob, 'application/pdf');
let pathFile: string;
if (this.platform.is("ios")) {
  console.log('ios detectado');
  pathFile = cordova.file.documentsDirectory; //cordova.file.dataDirectory;  externalDataDirectory
} else {
  console.log('other platform');
  pathFile = cordova.file.externalDataDirectory; //cordova.file.dataDirectory;  externalDataDirectory
}
console.log(pathFile);
let fileName : string = "snMaterialEscolar.pdf";
console.log("Iniciando escrita do arquivo pdf");
this.file.writeFile(pathFile,fileName, blob, {replace:true} ).then((entry)=>{
  console.log(pathFile);
  // if (this.platform.is("ios")) {
  //   window.open(pathFile + fileName, '_system', 'location=yes,closebuttoncaption=Fechar,enableViewportScale=yes');
  // } else {
  //   window.open(pathFile + fileName, '_system', 'location=yes,closebuttoncaption=Fechar,enableViewportScale=yes');
  // }
  // let optionsArray:DocumentViewerOptions[] = [];
  // optionsArray.push(this.options);
  cordova.plugins.SitewaertsDocumentViewer.viewDocument(pathFile + fileName, 'application/pdf', this.options, this.onShow, this.onClose, this.onMissingApp, this.onError);
}).catch((error)=>{
  console.log('Erro criação arquivo PDF:');
  console.log(error);
});
}

private onShow(){
window.console.log(‘Exibir documento.’);
//e.g. track document usage
}

private onClose(){
window.console.log(‘Fechar documento’);
//e.g. remove temp files
}

private onMissingApp(appId, installer) {
if (confirm(“Você quer instalar o app grátis PDF Viewer " + appId + " para Android?”)) { installer(); }
}

private onError(error) {
window.console.log(error);
alert(“Erro ao brir pdf.”);
}

/**

public b64toBlob(b64Data, contentType) : Blob {
contentType = contentType || ‘’;
let sliceSize = 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;

}

1 Like

thank you so much for share your code. it’s really helped me.

1 Like

2 years later, but could you find a solution to this problem? i am having all sort of errors till this day