Reputation: 332

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

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?

Upvotes: 10

Answers (4)

hriziya

Reputation: 1172

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)

Upvotes: 0

Fiach Reid

Reputation: 7059

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.

Upvotes: -1

PankajSharma

Reputation: 11

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

Upvotes: 1

Mayur Birari

Reputation: 5835

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

Upvotes: 4

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

Answers (4)

Related Questions