如何在Phonegap应用程序中打开下载的文件（pdf，zip，docx等）？

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. 用户单击下载按钮后，将从服务器下载文件（pdf，zip文件或docx），并将其存储在本地存储中。 I am able to download the file using FileTransfer.Download() method, but I can't open it by passing the file path. 我可以使用FileTransfer.Download（）方法下载文件，但我无法通过传递文件路径打开它。

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? 任何想法如何让它工作？

Answer 1

Natively PhoneGap does not allow to download a pdf file on your sd card and does not display PDF files automatically. 本机PhoneGap不允许在SD卡上下载pdf文件，也不会自动显示PDF文件。

Please install pdf reader on your smartphone. 请在智能手机上安装pdf阅读器。
Create a plugin for downloading files. 创建一个用于下载文件的插件。
Create a plugin for opening the pdf using the program installed in step 1. 使用步骤1中安装的程序创建用于打开pdf的插件。

Details of Step 2 and 3 : 第2步和第3步的详细信息 ：
Set the development environment PhoneGap in Eclipse. 在Eclipse中设置开发环境PhoneGap 。
Download the java classes of example from HERE 从HERE下载示例的java类
Unzip the downloaded file in the folder " src " 将下载的文件解压缩到“ src ”文件夹中
Download the javascript from the example from HERE 从这里下载示例中的javascript
Unzip the downloaded file in the folder " assets / www " 将下载的文件解压缩到“ assets / www”文件夹中
In the Index html file. 在Index html文件中。 give calls to js: 给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: 在“ res / xml / plugins.xml ”中添加：

<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: 要调用插件中定义的方法，请在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 积分转到http://www.giovesoft.com/2011/08/download-and-open-pdf-with-phonegap.html

Answer 2

use file opener plugin ( https://github.com/markeeftb/FileOpener ) , but it requir some pdf reader or office to read psf and doc file. 使用文件开启插件（ https://github.com/markeeftb/FileOpener ），但它需要一些pdf阅读器或办公室来阅读psf和doc文件。 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 插件来自https://github.com/markeeftb/FileOpener

Answer 3

You can use the global FileOpener plugin for Cordova. 您可以使用Cordova的全局FileOpener插件。 it is used to open all type of files 它用于打开所有类型的文件

http://plugins.cordova.io/#/package/fr.smile.cordova.fileopener 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 .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) 它现在不支持.pdf扩展。（2014年9月25日）

Answer 4

An inelegant but very simple solution to this problem that I've seen used, is to link to the Google docs pdf viewer service; 我见过这个问题的一个不优雅但非常简单的解决方案是链接到Google docs pdf viewer服务; https://docs.google.com/viewer?url=https://dl.dropboxusercontent.com/u/6731723/Beaver.pdf 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. 您当然必须使用inappbrowser链接到此页面，否则在iOS中，用户将无法退出PDF视图。

如何在Phonegap应用程序中打开下载的文件（pdf，zip，docx等）？

问题描述

4 个解决方案

解决方案1
4 2012-11-21 13:16:14

解决方案2
1 2013-08-01 10:41:17

解决方案3
0 2014-09-02 12:10:29

解决方案4
-1 2014-09-02 12:19:22

如何在Phonegap应用程序中打开下载的文件（pdf，zip，docx等）？

问题描述

4 个解决方案

解决方案1 4 2012-11-21 13:16:14

解决方案2 1 2013-08-01 10:41:17

解决方案3 0 2014-09-02 12:10:29

解决方案4 -1 2014-09-02 12:19:22

解决方案1
4 2012-11-21 13:16:14

解决方案2
1 2013-08-01 10:41:17

解决方案3
0 2014-09-02 12:10:29

解决方案4
-1 2014-09-02 12:19:22