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

score 63 · Accepted Answer

对于遇到这个问题的每个人来说，我终于发现了：

HTML 5 对象标签：不工作

嵌入标签：不工作

childBrowser Plugin： 我认为它会起作用，但它是为 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 将其下载到您的 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);
});

我发现的最后一件事是，使用谷歌文档/驱动器通过链接到谷歌文档的 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 文件，它仍然可以使用

我希望这个总结能帮助你节省时间。如果有其他解决方案让我知道

score 13 · Accepted Answer

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

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

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

score 8 · Accepted Answer

Try in this way it will work.

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

score 5 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

安装这个插件：cordova plugin add https://github.com/ti8m/DocumentHandler
使用此代码：

handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('没有应用程序处理这个文件类型。'); } }, ' http://www.example.com/path/to/document.pdf ');

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

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

IOS：它在弹出窗口中打开文件，如使用完成按钮和选项按钮的视图。

它不显示您的文档 URL。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

javascript - Phonegap InAppBrowser 显示pdf 2.7.0

8 回答 8

Related

Reference