Search code examples
javascriptcordovacordova-plugins

Opening a PDF in cordova javascript


I have generated a PDF invoice using the file plugin. Now I want to open the file in the app. I tried inAppBrowser, but its giving an empty page. I tried fileopener, its neither giving a success or failed message. How do I specify the path to my file . please help!!

In app Browser Method

var cdr='';
window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dir) {
cdr=dir;
alert("cdr "+cdr);
      dir.getFile("test.pdf", {create: true, exclusive: false}, function (fileEntry) 
      {
        fileEntry.createWriter(function (writer) {
writer.onwrite = function(evt) {
     console.log(" write success");
  };

  console.log("writing to file");
     writer.write( pdfOutput );


        },function () {


          console.log("ERROR SAVEFILE");

        });
      });
    });

window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dir) {

alert("open file");
      dir.getFile("test.pdf", {create:false}, function(fileEntry) { //EXISTS

      alert("native url "+cdr.toNativeURL());
        var url =cdr.toNativeURL()  + "test.pdf";
        alert(url);
        window.open(url, '_blank');
      }, function() { //NOT EXISTS
 alert("no file found");
      });
    });

}

Fileopener Method

 var cdr='';
    window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory ,     function(dir) {
    cdr=dir;
    console.log(" vidhya cdr "+cdr);
          dir.getFile("test.pdf", {create: true, exclusive: false}, function (fileEntry) 
          {
            fileEntry.createWriter(function (writer) {
    writer.onwrite = function(evt) {
         console.log("vidhya write success");
         openFile(cdr);
      };

      console.log("vidhya writing to file");
         writer.write( pdfOutput );


            },function () {


              console.log("vidhya ERROR SAVEFILE");

            });
          });
        });
    function openFile(cdr) {

    var fs;
    function fsSuccess(fileSystem)
    {
        fs = fileSystem;
        console.log("vidhya "+fs);
    }

    function fsFail(event)
    {
        console.log(event.target.error.code);
    }

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fsSuccess, fsFail);


        console.log("vidhya opening file " +cdr.toNativeURL());
    cordova.plugins.fileOpener2.open(
       fs.root.toURL() +'test.pdf',
        "application/pdf", //mimetype
        {
            error: function(e) {
                alert("Error Opening the File.Unsupported document format.");
            },
            success: function() {
                // success callback handler
                alert("success");
            }
        }
    );
    }

My file is getting saved in /internal storage/Android/Data/app_folder/files/test.pdf


Solution

  • If someone faces an issue while opening the file stored in device even with proper destination file path specified, please do ensure that the file is downloaded properly without corruption.

    Many a times file opening fails due to improper or corrupted download. You can also trace any error during download using chrome inspect devices option. Also ensure to use latest version of file transfer plugin to avoid download error.