Phonegap InAppBrowser display pdf 2.7.0

Question

Phonegap InAppBrowser display pdf 2.7.0

je veux afficher un PDF externe avec le phonegap InAppBrowser dans Android, mais il ne fonctionne pas.

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

je veux ouvrir le pdf après avoir cliqué sur une image alors j'utilise ce code html:

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

23

cordova html5 inappbrowser javascript

demandé sur Marc Ster 2013-05-28 18:52:42

8 réponses

score 59 · Answer 1

Pour tout le monde qui est bloqué avec ce problème ici, c'est ce que j'ai enfin trouvé:

HTML 5 de l'objet de la balise: ne fonctionne pas

balise intégrée: ne fonctionne pas

Plugin childBrowser: Je pense que ça marcherait, mais il est conçu pour la version 2.0.0. Donc vous allez avoir beaucoup d'erreurs donc je ne l'ai pas fait fonctionner.

Phonegap InAppViewer: Si tu l'utilises comme ça:

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

ça ne marchera pas. L'InAppViewer ne peut pas ouvrir PDF, il n'importe pas si le PDF est externe ou local stocké.

Mes solutions jusqu'à présent (pas ce que l'idée même était):

vous pouvez appeler la fonction window avec _system. comme ça:

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

ceci ouvrira le PDF dans le navigateur normal et le téléchargera. Après le téléchargement, il demandera s'il devrait l'ouvrir avec un lecteur PDF. Mais vous devez revenir à votre application et l'ouvrir de nouveau par la suite.

une autre possibilité serait de simplement le télécharger sur votre carte sdcard avec L'API du système de fichiers Phonegap comme ceci:

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

La dernière chose que j'ai constaté est, à l'utilisation de Google docs/drive pour l'ouvrir avec le InAppViewer lié à google docs comme ça:

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

ceci ouvrira le PDF dans l'application qui le visualise sur google docs. Vous pouvez générer votre permalien ici: https://docs.google.com/viewer Donc même si tu changes votre fichier pdf, il fonctionnera toujours

j'espère que ce résumé vous aidera à économiser du temps. Si il y a une autre solution faites le moi savoir

score 13 · Answer 2

Android n'a pas de capacité de visualisation natif PDf dans leur navigateur (contrairement au Safari d'iOS). Aussi loin que je peux voir, il ya deux options de nice:

sautez complètement le téléchargement et affichez le pdf via les fonctionnalités de visualisation en ligne de Google Doc Viewer, comme indiqué dans c'StackOverflow réponse
téléchargez le fichier et utilisez le plugin FileOpener pour les applications Phonegap Android comme expliqué dans c'StackOverflow réponse. Ceci ouvrira le fichier dans le lecteur PDF installé ou présentera à l'utilisateur un choix.

j'ai écrit quelques trucs sur le téléchargement et l'affichage D'un PDF sur iOS et ces options que j'ai montré dans mon blog pour les développeurs de Phonegap Android.

score 8 · Answer 3

essayez de cette façon.

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 · Answer 4

la réponse de Marc Ster est très complète. Cependant, l'approche pour ouvrir le pdf avec google docs exige de l'utilisateur de se connecter avec leur compte google.

si vous affichez des fichiers PDF qui sont situés sur un serveur de votre propre vous pouvez éviter cela et utiliser l'approche suivante: Vous pouvez configurer l' PDF.js bibliothèque sur votre serveur. C'est le projet open source qui aussi google docs sont basés sur pour voir des PDF dans un web navigateur.

Vous pouvez alors utiliser le InAppBrowser Plugin pour aller sur votre serveur où le PDF.js lie, spécifiant un chemin pour l'affichage du pdf dans L'URL. Le pdf devrait aussi être sur votre serveur, pour éviter les problèmes de CORS. Si c'est un pdf, vous pouvez écrire une solution de contournement, comme indiqué ici.

Vous pouvez afficher un côté client pdf avec un code similaire à celui-ci (en utilisant le plugin 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 · Answer 5

Android webview n'a pas de visualiseur PDF intégré. Rediriger l'utilisateur vers Google doc viewer exemple: http://docs.google.com/viewer?url=http://example.com/example.pdf

score 1 · Answer 6

essayez ceci pour ouvrir n'importe quel type de documents de L'URL en utilisant les étapes suivantes:

installer ce plugin : plugin cordova ajouter https://github.com/ti8m/DocumentHandler
utilisez ce code:

handleDocumentWithURL (function () {console.log ('success');}, function (error) { console.log ("l'échec"); if (erreur == 53) { console.log ("Pas de soft qui gère ce type de fichier.'); } }, 'http://www.example.com/path/to/document.pdf');

il fonctionne pour moi à la fois sur Android et IOS. Je l'ai utilisé pour ouvrir images et PDF fichiers.

Android: il ouvre des fichiers en utilisant des applications système si elles sont disponibles, sinon il donne une erreur, que vous pouvez gérer.

IOS: il ouvre les fichiers popup comme view avec les boutons "Done" et "Option".

Il ça ne montre pas L'URL de votre docs.

Source est disponible ici : https://github.com/ti8m/DocumentHandler

score 0 · Answer 7

j'ai essayé d'avoir le script dans le même fichier de l'html et il a travaillé pour moi, le seul changement que j'ai ajouté l'attribut "alt" de l'image:

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

score 0 · Answer 8

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

Las etiquetas más populares

Phonegap InAppBrowser display pdf 2.7.0

8 réponses