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

回答1:

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.

回答2:

This is how i made it work in my hybrid mobile app:

var cdr;
sessionStorage.platform = device.platform;
var fileTransfer = new FileTransfer();

if (sessionStorage.platform.toLowerCase() == "android") {
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, onFileSystemSuccess, onError);
} else {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onError);
}

function onError(e) {
    navigator.notification.alert("Error : Downloading Failed");
};

function onFileSystemSuccess(fileSystem) {
    var entry = "";
    if (sessionStorage.platform.toLowerCase() == "android") {
        entry = fileSystem;
    } else {
        entry = fileSystem.root;
    }
    entry.getDirectory("Cordova", {
        create: true,
        exclusive: false
    }, onGetDirectorySuccess, onGetDirectoryFail);
};

function onGetDirectorySuccess(dir) {
    dir.getDirectory("My_App", {
        create: true,
        exclusive: false
    }, onGetDirectorySuccess1, onGetDirectoryFail);
};

function onGetDirectorySuccess1(dir) {
    cdr = dir;
    dir.getFile(filename, {
        create: true,
        exclusive: false
    }, gotFileEntry, errorHandler);
};

function gotFileEntry(fileEntry) {
    var documentUrl = "http://myserverurl.com/test.pdf";
    var uri = documentUrl;
    fileTransfer.download(uri, cdr.nativeURL + docFileNameToView,
        function(entry) {
            openFile();
        },
        function(error) {
            navigator.notification.alert("Error");
        },
        false
    );
};

function openFile() {
    cordova.plugins.fileOpener2.open(
        cdr.nativeURL + docFileNameToView,
        'application/pdf', {
            error: function(e) {
                navigator.notification.alert("Error Opening the File.Unsupported document format.");
            },
            success: function() {

            }
        }
    );
};

function fail(error) {

    navigator.notification.alert("Error");
};

function errorHandler(e) {

    navigator.notification.alert("Error");
};

function onGetDirectoryFail(error) {

    navigator.notification.alert("Error");
};

This code uses cordova file transfer plugin to download pdf and file opener plugin to view the pdf. This sample code also use device plugin to get the device platform (iOS or Android) and dialog plugin to display notification.

Code was tested on iOS 9 and Android 6 devices and works fine. In Android, the file gets stored in storage/emulated/0/Cordova/My_App folder

来源：https://stackoverflow.com/questions/37206408/opening-a-pdf-in-cordova-javascript