Phonegap InAppBrowser显示PDF格式2.7.0

我想要在Android中使用PhoneAppInterBrowser显示一个外部PDF，但是它没有工作。

这是我的JS代码： 

<script> function openPDF() { var ref = window.open('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>

对于这个困扰这个问题的人，我终于明白了：

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

embedded式标签：无法使用

childBrowser插件：我认为它会工作，但它是专为2.0.0版本。 所以你会得到很多的错误，所以我没有得到它的工作。

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

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

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

我到目前为止的解决scheme（不是真正的想法是什么）：

你可以用_system调用窗口函数。 像那样： 

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

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

另一种可能性是，你只需要像下面这样使用Phonegap Filesystem API下载到你的SD卡： 

 var fileTransfer = new FileTransfer(); fileTransfer.download( "http://developer.android.com/assetshttp://img.dovov.comhome/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); });

我发现的最后一件事是，使用谷歌文档/驱动器与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文件，它仍然会工作

我希望这个总结会帮助你节省时间。 如果有另一个解决办法，让我知道

Android在浏览器中没有本地PDf查看器function（与iOS的Safari不同）。 据我所见，有两个很好的select：

  1. 完全跳过下载，并通过Google Doc Viewer的在线视图function显示PDF， 如此StackOverflow答案中所述

  2. 请下载该文件，并使用Android PhoneGap应用程序的FileOpener插件， 如此StackOverflow答案中所述 。 这将打开已安装的PDF阅读器中的文件或向用户提供select。

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

尝试这种方式，它会工作。 

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

Marc Ster的答案非常全面。 然而，用google文档打开PDF的方法需要用户使用他们的Google帐户login。

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

然后，您可以使用InAppBrowser插件前往PDF.js所在的服务器，指定要在URL中显示的pdf的path。 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');

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

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

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

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

IOS ：它打开文件在popup式视图与完成button和选项button。

它不显示您的文档url。

来源可在这里： https ： //github.com/ti8m/DocumentHandler

我试图让它在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('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> 
 function openPDF() { var ref = window.open('http://docs.google.com/viewer?url=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); }); }
Interesting Posts

如何在不使用插件的情况下使用Google Analytics和PhoneGap？

如何在Xcode中查看PhoneGap应用程序的javascript错误？

iOS版存档时未findPhonegap CDVViewController.h文件

如果最终使用PhoneGap，为什么要使用IBM Worklight？

如何防止应用程序运行在电话差距垂直滚动？

是否有可能在没有Mac的情况下为iOS创buildPhoneGap应用程序？

在Google Play开发者控制台中如何解决“APK的版本号需要高于2”？

离子android构build错误 – 无法find“ANDROID_HOME”环境variables

IOS项目显示错误“发生内部错误。 编辑function可能会受到限制“在xcode 7.1上

Cordova：启动特定的iOS模拟器图像