Javascript 应用浏览器中的Phonegap显示pdf 2.7.0_Javascript_Html_Cordova_Inappbrowser

Javascript 应用浏览器中的Phonegap显示pdf 2.7.0

javascript html cordova

Javascript 应用浏览器中的Phonegap显示pdf 2.7.0,javascript,html,cordova,inappbrowser,Javascript,Html,Cordova,Inappbrowser,我想在Android应用浏览器中使用phonegap显示一个外部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',

我想在Android应用浏览器中使用phonegap显示一个外部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>


函数openPDF（）{
var ref=窗口打开（'http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf“，”空白“，”位置=是“；
ref.addEventListener（'loadstart'，函数（事件）{alert（'start:'+event.url）；}）；
ref.addEventListener（'loadstop'，函数（事件）{alert（'stop:'+event.url）；}）；
ref.addEventListener（'loaderror'，函数（事件）{alert（'error:'+event.message）；}）；
ref.addEventListener（'exit'，函数（事件）{alert（event.type）；}）；
}

我想在单击图像后打开pdf，因此我使用以下html代码：

 <a href="#" onclick="openPDF()" >
   <img src="images/button.png">
 </a>

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


函数openPDF（）{
var ref=窗口打开（'http://www.i-drain.net/userfiles/file/einbauanleitung_iboard.pdf“，”空白“，”位置=是“；
ref.addEventListener（'loadstart'，函数（事件）{alert（'start:'+event.url）；}）；
ref.addEventListener（'loadstop'，函数（事件）{alert（'stop:'+event.url）；}）；
ref.addEventListener（'loaderror'，函数（事件）{alert（'error:'+event.message）；}）；
ref.addEventListener（'exit'，函数（事件）{alert（event.type）；}）；
}

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

HTML5对象标记：不工作

嵌入标记：不工作

儿童浏览器插件： 我认为它可以工作，但它是为2.0.0版本设计的。所以你会犯很多错误，所以我没有让它工作

应用查看器中的Phonegap: 如果您这样使用它：

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

这行不通。InAppViewer无法打开PDF，不管PDF是外部存储的还是本地存储的

到目前为止我的解决方案（不是实际想法）：

您可以使用_系统调用窗口函数。就像这样：

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

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

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并下载。下载后，它会询问是否应该用PDF查看器打开它。但你必须回到你的应用程序，然后再打开它

另一种可能是，您只需使用Phonegap文件系统API将其下载到SD卡，如下所示：

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

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

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

我发现的最后一件事是，使用Google docs/drive打开它时，InAppViewer链接到Google docs，如下所示：

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

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

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，并在谷歌文档上查看它。您可以在此处生成永久链接：因此，即使您更改了pdf文件，它仍然可以工作

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

Android webview没有内置PDF查看器。将用户重定向到Google文档查看器示例：

试着用这种方法，它会起作用的

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

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

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

下载文件并使用适用于Android Phonegap应用程序的FileOpener插件，如中所述。这将在已安装的PDF阅读器中打开文件，或向用户提供一个选择

我为Android Phonegap开发者写了一些关于在iOS上下载和显示PDF以及这些选项的文章。

Marc Strer的回答非常全面。然而，使用google文档打开pdf的方法要求用户使用其google帐户登录

如果您正在显示位于您自己的服务器上的PDF，您可以避免这种情况，并使用以下方法：您可以在服务器上设置库。这是一个开源项目，也是谷歌文档在web浏览器中查看PDF的基础
然后，您可以使用指向PDF.js所在的服务器，指定PDF在URL中显示的路径。pdf也应该在您的服务器上，以避免出现CORS问题。如果它是一个外部pdf，您可以编写一个解决方案，如前所述
您可能会显示一个pdf客户端，其代码与此类似（使用InAppBrowser插件）

var fileName=“myPdfOnMyServer.pdf”； var url=encodeURIComponent（'文件/上传/'+文件名）； var ref=window.open( 'https://www..com/pdfjs-1.0.10XX-dist/web/viewer.html?file=' +网址， "空白",， ‘位置=否，关闭按钮选项=关闭，启用视口比例=是’；
尝试使用以下步骤从URL打开任何类型的文档：

安装此插件：cordova插件添加

使用此代码：
handleDocumentWithURL（函数（）{console.log（'success'）；}，函数（error）{console.log（'failure'）；if（error==53）{console.log（'没有处理此文件类型的应用程序'）；}，'）

它在Android和IOS上都适用于我。我用它来打开图像和PDF文件
Android：如果可用，它会使用系统应用程序打开文件，否则会给出一个错误，您可以处理该错误
IOS：它使用“完成”按钮和“选项”按钮在弹出式视图中打开文件
它不会显示您的文档URL。

这里有可用的来源：
用它不工作的同一个文件尝试过：/还有什么重要的吗？我还为插件设置了权限。。即使我想用“设备就绪”调用函数，也不会发生任何事情。您的android清单中有两个活动吗？您需要它才能使其工作。请尝试在onclick事件中调用window.open函数。例如onclick=“window.open（'which url'）”并让我知道结果。如果它不起作用，follo