Phonegap InAppBrowser 如何显示 PDF 2.7.0？

Question

我想在Android上使用PhoneGap InAppBrowser显示一个外部PDF文件，但它无法工作。

这是我的JS代码：

<script>
function openPDF() {
     var ref = window.open('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_blank', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}


</script>

我想在单击图像后打开PDF，因此我使用以下HTML代码：

 <a href="#" onclick="openPDF()" >
   <img src="images/button.png">
 </a>

- Marc Ster

Answer 1

对于所有遇到这个问题的人，这里是我最终找到的解决方法：

HTML 5 object标签：无效

嵌入式标签：无效

childBrowser插件： 我认为它应该能够使用，但它只设计用于2.0.0版本。所以你会遇到很多错误，我没能让它正常工作。

Phonegap InAppViewer： 如果你像这样使用它：

window.open('http://www.example.com/test.pdf', '_blank', 'location=yes')

无法工作。InAppViewer 无法打开 PDF 文件，无论该文件是外部的还是本地存储的都没有关系。

到目前为止，我的解决方案（不是实际想法）：

您可以使用 _system 调用 window 函数。就像这样：

window.open('http://www.example.com/test.pdf', '_system', 'location=yes')

这将在普通浏览器中打开 PDF 并下载它。在下载后，它会询问是否应该使用 PDF 查看器打开。但是你必须在此之后返回到你的应用程序并再次打开它。

另一个可能性是，你可以使用 Phonegap 文件系统 API 将其下载到你的 SD 卡中，像这样：

var fileTransfer = new FileTransfer();
fileTransfer.download(
"http://developer.android.com/assets/images/home/ics-android.png",
"file://sdcard/ics-android.png",
function(entry) {
    alert("download complete: " + entry.fullPath);
},
function(error) {
    alert("download error source " + error.source);
    alert("download error target " + error.target);
    alert("upload error code" + error.code);
});

我最后发现的是，使用Google文档/云端硬盘，通过InAppViewer链接到类似于Google文档的方式打开它:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

window.open('https://docs.google.com/viewer?url=http://www.example.com/test.pdf&embedded=true', '_blank', 'location=yes'); 
ref = window.open('index.html', '_self');
 }

这将在谷歌文档中打开PDF文件。您可以在此生成永久链接： https://docs.google.com/viewer 因此，即使您更改了PDF文件，链接仍然有效。

希望这个摘要能帮助您节省时间。如果有其他解决方案，请让我知道。

- Marc Ster

---

我认为你可以在Google Viewer行中删除“＆embedded = true”吗？如果我放在那里，它会要求我登录。 - thedjaney

“_system”一直是我想要的，但每个人都试图在浏览器中打开文件……非常感谢你详细的回答，点赞！ - Erik Grosskurth

Answer 2

Android浏览器没有原生的PDF查看器功能（不像iOS的Safari浏览器）。 据我所见，有两个好的选择：

1. 完全跳过下载并通过Google Doc Viewer的在线查看功能显示PDF，正如这个StackOverflow答案所述

2. 下载文件并在Android Phonegap应用程序中使用FileOpener插件，如这个StackOverflow答案中解释的那样。这将在安装的PDF阅读器中打开文件或向用户提供选择。

我写了一些关于在iOS上下载和显示PDF的东西，对于Android Phonegap开发人员，我在我的博客文章中展示了这些选项。

- EeKay

---

非常好的解释！ - Evers

Answer 3

试着这样做，它会起作用的。

var ref = window.open('http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_system', 'location=yes');

- Elius

Answer 4

Marc Ster的回答非常全面。然而，使用Google文档打开pdf需要用户使用他们的Google账户登录。

如果您要显示位于自己服务器上的pdf，则可以避免这种情况并使用以下方法：您可以在服务器上设置PDF.js库。它是开源项目，也是Google文档用于在Web浏览器中查看PDF的基础。

然后，您可以使用InAppBrowser插件进入您的服务器，其中包含PDF.js，指定URL中要显示的pdf路径。 pdf也应该位于您的服务器上，以避免出现CORS问题。如果它是外部pdf，您可以编写解决方法，如此处所述。

您可以使用类似于此代码的客户端代码显示pdf（使用InAppBrowser插件）。

var fileName = "myPdfOnMyServer.pdf";
var url = encodeURIComponent('files/uploads/' + fileName);
var ref = window.open(
         'https://www.<my website>.com/pdfjs-1.0.10XX-dist/web/viewer.html?file='
         + url,
         '_blank',
         'location=no,closebuttoncaption=Close,enableViewportScale=yes');

- Clawish

Answer 5

Android webview没有内置PDF查看器。 将用户重定向到Google文档查看器示例： http://docs.google.com/viewer?url=http://example.com/example.pdf

- lsolano

Answer 6

尝试使用以下步骤打开URL中的任何类型文档：

• 安装这个插件：cordova plugin add https://github.com/ti8m/DocumentHandler

• 使用这段代码：

  handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } }, 'http://www.example.com/path/to/document.pdf');

我在Android和IOS上都使用了它，可以用来打开图片和PDF文件。

Android：如果有系统应用程序可以打开文件，则使用它们打开文件，否则会显示错误提示，您可以进行处理。

IOS：它会在弹出式视图中打开文件，并带有“完成”按钮和“选项”按钮。

它不会显示您的文档URL。

这里提供源代码：https://github.com/ti8m/DocumentHandler

- SANAT

Answer 7

function openPDF() {
     var ref = window.open('http://docs.google.com/viewer?url=http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_system', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}

- Richa

Answer 8

我尝试将脚本放在与HTML相同的文件中，对我来说它起作用了，唯一的变化是我在图像上添加了“alt”属性：

 <html lang="en">

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <a href="#" onclick="openPDF()" >
   <img alt="aaa" src="images/button.png">
 </a>
    </body>
</html>
<script>
function openPDF() {
     var ref = window.open('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf', '_blank', 'location=yes');
     ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
     ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
     ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
     ref.addEventListener('exit', function(event) { alert(event.type); });
}


</script>

- SamDroid

---

尝试了使用同一个文件但是不起作用 :/ 还有其他重要的事情吗? 我还设置了插件的权限...即使我想用 "设备准备" 调用函数也没有任何反应. - Marc Ster

最后一个例子至少打开了PDF查看器。但是我想要显示的外部PDF没有显示... - Marc Ster

我尝试了这段代码：function onDeviceReady() { // external url var ref = window.open(encodeURI('http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf'), '_blank', 'location=yes'); // relative document ref = window.open('indexE.html', '_self'); } 它打开了inAppViwer，我也能够点击“完成”返回到索引页面...但是pdf没有显示。 - Marc Ster

你是否将外部网站添加到了白名单中？你能否对该域名进行常规的 window.open() 调用，打开一些随机页面（不是 .pdf 文件）？ - MBillau

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/30900/discussion-between-samdroid-and-marc-ster - SamDroid