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

【问题标题】：How to open downloaded file (pdf,zip,docx, etc) in Phonegap app?如何在 Phonegap 应用程序中打开下载的文件（pdf、zip、docx 等）？
【发布时间】：2012-11-14 08:24:53
【问题描述】：

目前我正在下载模块。一旦用户单击下载按钮，文件（pdf、zip 文件或 docx 格式）将从服务器下载并存储在本地存储中。我可以使用 FileTransfer.Download() 方法下载文件，但无法通过传递文件路径来打开它。

下面是我的代码：

<!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>

知道如何让它工作吗？

【问题讨论】：

可能对你有帮助：stackoverflow.com/questions/10481045/open-pdf-using-phone-gap
entry.fullPath 返回什么？是单纯的本地访问文件的问题还是下载失败？
entry.fullPath return file///mnt/sdcard/beaver.pdf 文件下载成功，我在SD卡里找到了

标签： android jquery cordova

【解决方案1】：

PhoneGap 本身不允许在您的 sd 卡上下载 pdf 文件，也不会自动显示 PDF 文件。

请在您的智能手机上安装 pdf 阅读器。
创建一个用于下载文件的插件。
使用安装在第 1 步。

第 2 步和第 3 步的详细信息：
在Eclipse中设置开发环境PhoneGap。
从HERE下载示例的java类
将下载的文件解压到“src”文件夹中
从 HERE
下载示例中的 javascript 将下载的文件解压到文件夹“assets/www”
在索引 html 文件中。调用 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>

在“res/xml/plugins.xml”中添加：

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

要调用插件中定义的方法，请在 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>

归功于http://www.giovesoft.com/2011/08/download-and-open-pdf-with-phonegap.html

【讨论】：

【解决方案2】：

使用文件打开器插件（https://github.com/markeeftb/FileOpener），但它需要一些 pdf 阅读器或 office 来阅读 psf 和 doc 文件。但首先我们必须安装这两个。然后使用这个插件打开 downloaderd 文件。但是这个插件只在本地存储而不是内部存储的情况下工作。插件https://github.com/markeeftb/FileOpener

【讨论】：

【解决方案3】：

您可以使用 Cordova 的全局 FileOpener 插件。它用于打开所有类型的文件

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

支持的扩展

插件管理这些扩展：

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

它现在不支持 .pdf 扩展名。（2014 年 9 月 25 日）

【讨论】：

【解决方案4】：

我见过的一个不优雅但非常简单的解决方案是链接到 Google docs pdf 查看器服务； https://docs.google.com/viewer?url=https://dl.dropboxusercontent.com/u/6731723/Beaver.pdf

您当然必须使用inappbrowser 链接到此页面，否则在 iOS 中，用户将无法退出 PDF 视图。

【讨论】：