Html Phonegap InAppBrowser 显示 pdf 2.7.0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16795172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Phonegap InAppBrowser display pdf 2.7.0
提问by Marc Ster
I want to display an external PDF with the phonegap InAppBrowser in Android, but it isn′t working.
我想在 Android 中使用 phonegap InAppBrowser 显示外部 PDF，但它不起作用。
This is my JS code:
这是我的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>
I want to open the pdf after clicking on a image so i use this html code:
我想在单击图像后打开 pdf，所以我使用以下 html 代码：
<a href="#" onclick="openPDF()" >
<img src="images/button.png">
</a>
回答by Marc Ster
For everybody who is stuck with this problem here is what i′ve finally found out:
对于在这里遇到这个问题的每个人来说，我终于发现了：
HTML 5 object tag:not working
HTML 5 对象标签：不起作用
Embedded tag:not working
嵌入标签：不工作
childBrowser Plugin:I think it would work, but it is designed for the 2.0.0 version. So you′ll get a lot of errors so i didn′t get it to work.
childBrowser Plugin：我认为它可以工作，但它是为 2.0.0 版本设计的。所以你会得到很多错误，所以我没有让它工作。
Phonegap InAppViewer:If you use it like that:
Phonegap InAppViewer：如果你这样使用它：
window.open('http://www.example.com/test.pdf', '_blank', 'location=yes')
it wont work. The InAppViewer can′t open PDF, it doesn′t matter if the PDF is external or local stored.
它不会工作。InAppViewer 无法打开 PDF，不管 PDF 是外部存储还是本地存储。
My solutions so far (not what the actual idea was):
到目前为止我的解决方案（不是实际的想法是什么）：
you can call the window function with _system. like that:
你可以用_system调用窗口函数。像那样：
window.open('http://www.example.com/test.pdf', '_system', 'location=yes')
this will open the PDF in the normal Browser and download it. After downloading it will ask if it should open it with a PDF viewer. But you have to go back to your app and open it again after that.
这将在普通浏览器中打开 PDF 并下载它。下载后，它会询问是否应使用 PDF 查看器打开它。但是您必须返回您的应用程序并在此之后再次打开它。
Another possibility would be that you just download it to your sdcard with the Phonegap Filesystem API like that:
另一种可能性是，您只需使用 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);
});
The last thing i′ve found out is, to use Google docs/drive to open it with the InAppViewer linked to google docs like that:
我发现的最后一件事是，使用谷歌文档/驱动器通过链接到谷歌文档的 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');
}
This will open the PDF in the app viewing it on google docs. You can generate your permalink here: https://docs.google.com/viewerSo even if you change your pdf file, it will still work
这将在应用程序中打开 PDF，在 google docs 上查看它。您可以在此处生成永久链接：https: //docs.google.com/viewer因此，即使您更改了 pdf 文件，它仍然有效
I hope this summary will help you save time. If there is another solution let me know
我希望这个总结能帮助你节省时间。如果有其他解决方案，请告诉我
回答by EeKay
Android has no native PDf viewer capability in their browser (unlike iOS' Safari). As far as I can see there are two nice options:
Android 在其浏览器中没有原生的 PDF 查看器功能（与 iOS 的 Safari 不同）。据我所知，有两个不错的选择：
Skip downloading entirely and show the pdf via the online view capabilities of Google Doc Viewer, as stated in this StackOverflow answer
DO download the file and use the FileOpener plugin for Android Phonegap apps as explained in this StackOverflow answer. This will either open the file in the installed PDF reader or present the user with a choice.
完全跳过下载并通过 Google Doc Viewer 的在线查看功能显示 pdf，如此 StackOverflow 答案中所述
请下载该文件并使用适用于 Android Phonegap 应用程序的 FileOpener 插件，如此 StackOverflow 答案中所述。这将在已安装的 PDF 阅读器中打开文件或为用户提供选择。
I've written some stuff on downloading and showing a PDF on iOS and these options I showed in my blog postfor Android Phonegap developers.
我写了一些关于在 iOS 上下载和显示 PDF 的内容，以及我在我的博客文章中为 Android Phonegap 开发人员展示的这些选项。
回答by Elius
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');
回答by Clawish
The answer of Marc Ster is very comprehensive. However, the approach to open the pdf with google docs requires the user to login with their google account.
Marc Ster 的回答非常全面。但是，使用 google docs 打开 pdf 的方法要求用户使用其 google 帐户登录。
If you are displaying pdfs that are located on a server that is your ownyou can avoid this and use the following approach: You can setup the PDF.jslibrary on your server. It is the open source project that also google docs are based on to view PDFs in a web browser.
如果您要显示位于您自己的服务器上的 pdf，您可以避免这种情况并使用以下方法：您可以在您的服务器上设置PDF.js库。它是一个开源项目，谷歌文档也基于它在网络浏览器中查看 PDF。
You can then use the InAppBrowser Pluginto head onto your server where the PDF.js lies, specifying a path for the pdf to display in the URL. The pdf should also be on your server, to avoid having CORS issues. If it is an external pdf, you could write a workaround, as stated here.
然后，您可以使用InAppBrowser 插件访问 PDF.js 所在的服务器，指定要在 URL 中显示的 pdf 的路径。pdf 也应该在您的服务器上，以避免出现 CORS 问题。如果它是一个外部PDF格式，你可以写一个解决办法，如规定在这里。
You might display a pdf client side with code similar to this (using the InAppBrowser plugin)
您可能会使用与此类似的代码显示 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');
回答by lsolano
Android webview does not have PDF viewer built-in. Redirect user to Google doc viewer example: http://docs.google.com/viewer?url=http://example.com/example.pdf
Android webview 没有内置 PDF 查看器。将用户重定向到 Google 文档查看器示例：http: //docs.google.com/viewer?url=http: //example.com/example.pdf
回答by SANAT
Try this to open any kind of documents from URL using following steps:
尝试使用以下步骤从 URL 打开任何类型的文档：
- install this plugin : cordova plugin add https://github.com/ti8m/DocumentHandler
use this code :
handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handles this file type.'); } }, 'http://www.example.com/path/to/document.pdf');
- 安装这个插件：cordova插件添加https://github.com/ti8m/DocumentHandler
使用此代码：
handleDocumentWithURL(function() { console.log('success'); }, function(error) { console.log('failure'); if (error == 53) { console.log('No app that handle this file '); } }, ' http://www.example.com/path/to/document.pdf');
It works for me both on Android and IOS. I used it for open imagesand PDFfiles.
它在 Android 和 IOS 上都适用于我。我用它来打开图像和PDF文件。
Android: It opens files using system apps if available, otherwise it give an error, which you can handle.
Android：如果可用，它会使用系统应用程序打开文件，否则会出现错误，您可以处理。
IOS: It opens files in popup like view with Done button and Option button.
IOS：它使用“完成”按钮和“选项”按钮在弹出式视图中打开文件。
It doesn't show your docs URL.
它不会显示您的文档 URL。
Source is available here : https://github.com/ti8m/DocumentHandler
来源可在此处获得：https: //github.com/ti8m/DocumentHandler
回答by Richa
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); });
}
回答by SamDroid
I tried it having the script in the same file of the html and it worked for me, the only change was that i added the "alt" attribute at the image:
我尝试将脚本放在 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>
