it-swarm.com.de

Phonegap InAppBrowser Anzeige pdf 2.7.0

Ich möchte ein externes PDF mit dem InAppBrowser von phonegap in Android anzeigen, aber es funktioniert nicht.

Dies ist mein JS-Code:

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

Ich möchte die PDF-Datei öffnen, nachdem Sie auf ein Bild geklickt haben, daher verwende ich diesen HTML-Code:

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

Für alle, die sich mit diesem Problem beschäftigen, habe ich endlich herausgefunden:

HTML 5-Objekttag: funktioniert nicht

Embedded-Tag: funktioniert nicht

childBrowser Plugin: Ich denke es würde funktionieren, aber es ist für die Version 2.0.0 gedacht. Sie werden also viele Fehler bekommen, also habe ich es nicht zum Laufen gebracht.

Phonegap InAppViewer: Wenn du es so benutzt: 

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

es wird nicht funktionieren. Der InAppViewer kann PDF nicht öffnen, es spielt keine Rolle, ob PDF extern oder lokal gespeichert ist.

Meine bisherigen Lösungen (nicht die eigentliche Idee):

sie können die Fensterfunktion mit _system aufrufen. so wie das:

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

dadurch wird PDF im normalen Browser geöffnet und heruntergeladen. Nach dem Download werden Sie gefragt, ob es mit einem PDF - Viewer geöffnet werden soll. Sie müssen jedoch zu Ihrer App zurückkehren und sie danach erneut öffnen.

Eine andere Möglichkeit wäre, dass Sie es einfach mit der Phonegap-Dateisystem-API auf Ihre SD-Karte herunterladen:

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

Das Letzte, was ich herausgefunden habe, ist, Google docs/drive zum Öffnen mit dem InAppViewer zu verwenden, der mit solchen Google-Dokumenten verknüpft ist:

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

Dadurch wird PDF in der App geöffnet und in Google Docs angezeigt. Sie können Ihren Permalink hier generieren: https://docs.google.com/viewer Selbst wenn Sie Ihre PDF-Datei ändern, funktioniert sie trotzdem

Ich hoffe, diese Zusammenfassung hilft Ihnen, Zeit zu sparen. Wenn es eine andere Lösung gibt, lass es mich wissen

61
Marc Ster

Android hat keine native PDf-Viewer-Funktion in ihrem Browser (im Gegensatz zu iOS Safari) . Soweit ich sehen kann, gibt es zwei schöne Optionen: 

  1. Überspringen Sie den Download vollständig und zeigen Sie das PDF über die Online-Ansichtsfunktionen von Google Doc Viewer an, wie in dieser StackOverflow-Antwort angegeben.

  2. Laden Sie die Datei herunter und verwenden Sie das FileOpener-Plugin für Android Phonegap-Apps, wie in diese StackOverflow-Antwort erläutert. Dadurch wird die Datei entweder im installierten PDF -Leser geöffnet oder dem Benutzer eine Auswahlmöglichkeit angezeigt.

Ich habe ein paar Sachen zum Herunterladen und Anzeigen eines PDF unter iOS geschrieben, und diese Optionen habe ich in meinem Blogpost für Android Phonegap-Entwickler gezeigt.

13
EeKay

Versuchen Sie es auf diese Weise.

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

Die Antwort von Marc Ster ist sehr umfassend. Der Ansatz zum Öffnen der PDF-Datei mit Google-Dokumenten erfordert jedoch, dass sich der Benutzer mit seinem Google-Konto anmelden muss.

Wenn Sie pdfs anzeigen, die sich auf einem eigenen server befinden, können Sie dies vermeiden und folgendermaßen vorgehen: Sie können die Bibliothek PDF.js auf Ihrem Server einrichten. Es ist das Open-Source-Projekt, auf dem auch Google-Dokumente basieren, um PDFs in einem Webbrowser anzuzeigen.

Sie können dann das InAppBrowser Plugin verwenden, um zu Ihrem Server zu gelangen, auf dem sich die PDF.js befindet, und einen Pfad für die PDF-Datei anzugeben, die in der URL angezeigt werden soll. Das PDF sollte sich auch auf Ihrem Server befinden, um Probleme mit CORS zu vermeiden. Wenn es sich um ein externes PDF handelt, können Sie eine Problemumgehung schreiben, wie hier .

Möglicherweise zeigen Sie eine PDF-Clientseite mit ähnlichem Code an (mithilfe des InAppBrowser-Plugins).

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
Clawish

In Android-Webview ist der Viewer PDF nicht integriert. Nutzer zum Google Doc Viewer-Beispiel umleiten: http://docs.google.com/viewer?url=http://example.com/example.pdf

2
lsolano

Versuchen Sie dies, um Dokumente aller Art über die URL zu öffnen. Gehen Sie dazu folgendermaßen vor:

Es funktioniert für mich sowohl auf Android als auch auf IOS. Ich habe es für offene images - und PDF -Dateien verwendet. 

Android: Öffnet Dateien mit System-Apps, falls verfügbar, andernfalls wird ein Fehler ausgegeben, den Sie behandeln können.

IOS: Öffnet die Dateien in einer Popup-Ansicht mit der Schaltfläche Fertig und der Optionstaste.

Ihre Dokument-URL wird nicht angezeigt.

Quelle ist hier verfügbar: https://github.com/ti8m/DocumentHandler

1
SANAT

Ich habe es mit dem Skript in der gleichen Datei des HTML-Codes versucht und es funktionierte für mich. Die einzige Änderung bestand darin, dass ich das "alt" -Attribut im Bild hinzugefügt habe:

 <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>
0
SamDroid
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); });
}
0
Richa