How to open downloaded file (pdf,zip,docx, etc) in Phonegap app?

Question

Currently I am working on downloading module. Once user clicks download button, the file (either in pdf, zip file, or docx) will be downloaded from server and will be stored in local storage. I am able to download the file using FileTransfer.Download() method, but I can't open it by passing the file path.

Below is my code:

<!DOCTYPE HTML>
<html>
<head>
    <meta name = "viewport" content = "user-scalable=no,width=device-width" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Test Page</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
        }
    </style>
  <script type="text/javascript" charset="utf-8">
      function init() {
          document.addEventListener("deviceready", ready, true);
      }

      function ready() {
          console.log("App is ready.");
      }

      function download() {

       //   var remoteFile = "https://dl.dropbox.com/u/6731723/a.zip";
          var remoteFile = "https://dl.dropbox.com/u/6731723/Beaver.pdf";
          var localFileName = remoteFile.substring(remoteFile.lastIndexOf('/') + 1);

          window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
              fileSystem.root.getFile(localFileName, { create: true, exclusive: false }, function (fileEntry) {
                  var localPath = fileEntry.fullPath;
                  console.log("localPath1:" + localPath);
                  if (device.platform === "Android" && localPath.indexOf("file://") === 0) {
                      localPath = localPath.substring(7);
                  }
                  console.log("localPath2 save:" + localPath);
                  var ft = new FileTransfer();
                  ft.download(remoteFile,
                      localPath, function (entry) {
                          console.log("file path:" + entry.fullPath);
                          var linkopen = document.getElementById("openlink");
                          linkopen.style.display = "block";
                          linkopen.href = entry.fullPath;

                          // var dwnldImg = document.getElementById("dwnldImg");
                          //dwnldImg.src = entry.fullPath;
                          //dwnldImg.style.visibility = "visible";
                          //dwnldImg.style.display = "block";
                      }, fail);
              }, fail);
          }, fail);
      }

      function fail(error) {
          console.log("error:" + error.code);
      }
  </script>
</head>

<body onload="init();">
    <a href="#" onclick="download();">Download file</a>

    <br />
    <br />
    <br />
    <a href="#" id="openlink" style="display:none;font-size:larger;">open</a>
</body>
</html>

any idea how to get it work?

May be help you:http://stackoverflow.com/questions/10481045/open-pdf-using-phone-gap — boiledwater, Nov 14 '12 at 08:32
What does ``entry.fullPath`` return? Is it simply a problem of accessing the file locally or does the download fail? — Louis B., Nov 14 '12 at 09:19
`entry.fullPath` return file///mnt/sdcard/beaver.pdf .The file has successfully downloaded, I can found it in SD memory card — Joehom Sum, Nov 14 '12 at 09:29

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

Natively PhoneGap does not allow to download a pdf file on your sd card and does not display PDF files automatically.

Please install pdf reader on your smartphone.
Create a plugin for downloading files.
Create a plugin for opening the pdf using the program installed in step 1.

Details of Step 2 and 3:
Set the development environment PhoneGap in Eclipse.
Download the java classes of example from HERE
Unzip the downloaded file in the folder " src "
Download the javascript from the example from HERE
Unzip the downloaded file in the folder " assets / www "
In the Index html file. give calls to js:

<script charset="utf-8" src="main.js"> </script>
<script charset="utf-8" src="pdfviewer.js"> </script>
<script charset="utf-8" src="downloader.js"> </script>

In " res / xml / plugins.xml "add:

<plugin name="Downloader" value="com.phonegap.plugins.downloader.Downloader"/>
<plugin name="PdfViewer" value="com.phonegap.plugins.pdfViewer.PdfViewer"/>

To call the methods defined in the plugin, test following code in index.html:

<! DOCTYPE HTML>
<html>
<head>
<title> PhoneGap-Android PDF Opening App</title>
<script charset="utf-8" src="phonegap-1.0.0.js"></script>
<script charset="utf-8" src="main.js"></script>
<script charset="utf-8" src="pdfviewer.js"></script>
<script charset="utf-8" src="downloader.js"></script>
</Head>

<body>
<h1> Hello World </ h1>
<a href = "#" 'sampleurf.pdf', true, downloadOkCallbak, downloadErCallbak) "> Download pdf </a> <br>
<a href="#" onclick="window.plugins.pdfViewer.showPdf('/sdcard/download/sample/samplesurf.pdf');"> open </a>
</body>
</html>

Credit goes to http://www.giovesoft.com/2011/08/download-and-open-pdf-with-phonegap.html

score 1 · Answer 2 · answered Aug 01 '13 at 10:41

use file opener plugin ( https://github.com/markeeftb/FileOpener ) , but it requir some pdf reader or office to read psf and doc file. but first we have to install these two. and then use this plugin to open downloaderd file. But this plugin work only in case of local storage not in internal storage. plugin at https://github.com/markeeftb/FileOpener

score 0 · Answer 3 · edited Sep 25 '14 at 05:35

You can use the global FileOpener plugin for Cordova. it is used to open all type of files

http://plugins.cordova.io/#/package/fr.smile.cordova.fileopener

Supported Extensions

The plugin manages theses extensions:

.doc, .docx, .xls, .xlsx, .rtf, .wav, .gif, .jpg, .jpeg, .png, .txt, .mpg, .mpeg, .mpe, .mp4, .avi, .ods, .odt, .ppt, .pptx, .apk

Its not supporting .pdf extension now.(25 Sep 2014)

score -1 · Answer 4 · answered Sep 02 '14 at 12:19

An inelegant but very simple solution to this problem that I've seen used, is to link to the Google docs pdf viewer service; https://docs.google.com/viewer?url=https://dl.dropboxusercontent.com/u/6731723/Beaver.pdf

You, must of course use the inappbrowser to link to this page, otherwise in iOS, the user will not be able to back out of the PDF view.

How to open downloaded file (pdf,zip,docx, etc) in Phonegap app?

4 Answers4

Linked