Phonegap InAppBrowser 显示 pdf 2.7.0

IT技术 javascript html cordova inappbrowser
2021-01-18 23:58:09

我想在 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>
6个回答

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

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 文件系统 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，在 google docs 上查看它。您可以在此处生成永久链接：https : //docs.google.com/viewer 因此，即使您更改了 pdf 文件，它仍然有效

我希望这个总结能帮助你节省时间。如果有其他解决方案，请告诉我

我认为您可以删除 google viewer 行中的“&embedded=true”？如果我把它放在那里，它要求我登录。
2021-03-28 23:58:09
'_system' 是我一直想要的，每个人都一直试图在浏览器中打开文件......竖起大拇指，答案非常详细
2021-04-09 23:58:09

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

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

  2. 请下载该文件并使用适用于 Android Phonegap 应用程序的 FileOpener 插件，如此 StackOverflow 回答中所述。这将在已安装的 PDF 阅读器中打开文件或为用户提供选择。

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

很好的解释！
2021-03-31 23:58:09

以这种方式尝试它会起作用。

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

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

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

其它你可能感兴趣的问题
上一篇获取元素的 CSS 选择器（当它没有 id 时） 下一篇有没有办法选择兄弟节点？