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>

Answer 1

对于每个坚持这个问题的人来说，这是我最终发现的：

HTML 5对象标记：无法正常工作

嵌入式代码：无效

childBrowser插件： 我认为它会工作，但它是为2.0.0版本设计的。因此，你会遇到很多错误，所以我没有让它发挥作用。

Phonegap InAppViewer： 如果您这样使用它：

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

它不会工作。 InAppViewer无法打开PDF，无论PDF是外部还是本地存储都无关紧要。

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

您可以使用_system调用窗口函数。那样：

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链接到谷歌文档，如：

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文件，它仍然可以正常工作

我希望这个摘要可以帮助您节省时间。如果有其他解决方案，请告诉我

Answer 2

Android在浏览器中没有原生的PDf查看器功能（与iOS＆＃39; Safari不同）。据我所知，有两个不错的选择：

完全跳过下载并通过Google文档查看器的在线查看功能显示pdf，如this StackOverflow answer
请按照this StackOverflow answer中的说明下载该文件并使用适用于Android Phonegap应用的FileOpener插件。这将打开已安装的PDF阅读器中的文件或向用户提供选择。

我已经写了一些关于下载和在iOS上显示PDF的内容以及我在my blog post为Android Phonegap开发人员展示的这些选项。

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');

Answer 4

Marc Ster的答案非常全面。但是，使用谷歌文档打开pdf的方法要求用户使用他们的谷歌帐户登录。

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

然后，您可以使用InAppBrowser Plugin进入PDF.js所在的服务器，指定要在URL中显示的pdf的路径。 pdf也应该在您的服务器上，以避免出现CORS问题。如果是外部pdf，您可以编写一个解决方法，如here所述。

您可能会显示一个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');

Answer 5

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

Answer 6

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

安装此插件：cordova插件添加https://github.com/ti8m/DocumentHandler
使用此代码：

handleDocumentWithURL（function（）{console.log（＆＃39; success＆＃39;）;}，function（error）{console.log（＆＃39; failure＆＃39;）; if（error == 53 ）{console.log（＆＃39;没有处理此文件类型的应用。＆＃39;）;}}，＆＃39; http://www.example.com/path/to/document.pdf＆＃39;）;

它适用于Android和IOS。我用它来打开图像和 PDF 文件。

Android ：它会使用系统应用程序打开文件（如果可用），否则会出错，您可以处理。

IOS ：它使用“完成”按钮和“选项”按钮以弹出窗口打开文件。

它不会显示您的文档网址。

来源可在此处找到：https://github.com/ti8m/DocumentHandler

Answer 7

我尝试将脚本放在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>

Answer 8

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); });
}

Phonegap InAppBrowser显示pdf 2.7.0

8 个答案: