Phonegap InAppBrowser 显示pdf 2.7.0答案

【问题标题】：Phonegap InAppBrowser display pdf 2.7.0Phonegap InAppBrowser 显示pdf 2.7.0
【发布时间】：2013-05-28 14:52:42
【问题描述】：

我想在 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>

【问题讨论】：

标签： javascript html cordova inappbrowser

【解决方案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 Filesystem API 将其下载到您的 sdcard 中：

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 docs/drive 使用链接到 google docs 的 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 文件，它仍然可以工作

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

【讨论】：

我认为您可以删除谷歌查看器行中的“&embedded=true”？如果我把它放在那里，它需要我登录。
'_system' 是我一直想要的，每个人都一直试图在浏览器中打开文件......竖起大拇指，非常详细的答案

【解决方案2】：

Android 在其浏览器中没有本机 PDf 查看器功能（与 iOS 的 Safari 不同）。据我所知，有两个不错的选择：

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

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

【讨论】：

很好的解释！

【解决方案3】：

用这种方法试试就行了。

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

【讨论】：

【解决方案4】：

Marc Ster 的回答非常全面。但是，使用 google docs 打开 pdf 的方法需要用户使用他们的 google 帐户登录。

如果您要显示位于 您自己的服务器上的 pdf，您可以避免这种情况并使用以下方法：您可以在您的服务器上设置 PDF.js 库。它是一个开源项目，也是谷歌文档在网络浏览器中查看 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');

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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处理此文件类型。'); } }, 'http://www.example.com/path/to/document.pdf');

它适用于我在 Android 和 IOS 上。我用它来打开 images 和 PDF 文件。

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

IOS : 它在弹出窗口中打开文件，例如带有完成按钮和选项按钮的视图。

它不显示您的文档 URL。

来源可在此处获得：https://github.com/ti8m/DocumentHandler

【讨论】：

【解决方案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>

【讨论】：

用同样的文件试过了，它不起作用：/还有什么重要的吗？我还设置了插件的权限.. 即使我想用“设备就绪”调用函数也没有任何反应
你的 android manifest 中有两个 Activity 吗？你需要它来使它工作。尝试在 onclick 事件中调用 window.open 函数。例如 onclick="window.open('whatever url')" 并让我知道结果。如果它不起作用，请按照这个：link@MarcSter
“你的 android manifest 中有两个活动”到底是什么意思？我刚刚添加了这个权限行：到 config.xml，如 phonegap api 中所述。
@MarcSter：你能尝试“执行”这个页面的最后一个完整示例PhoneGapApi 并告诉我它是否有效吗？
最后一个例子至少打开了pdf查看器。但是我想显示的外部 pdf 没有显示..

【解决方案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); });
}

【讨论】：