web-dev-qa-db-fra.com

Phonegap InAppBrowser display pdf 2.7.0

Je souhaite afficher un PDF externe avec InAppBrowser dans Android, mais cela ne fonctionne pas.

Ceci est 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 pour utiliser ce code html:

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

C’est ce que j’ai enfin découvert:

Balise d'objet HTML 5: ne fonctionne pas

Balise incorporée: ne fonctionne pas

childBrowser Plugin: Je pense que cela fonctionnerait, mais il est conçu pour la version 2.0.0. Donc, vous aurez beaucoup d’erreurs, donc je n’ai pas réussi à le faire fonctionner.

Phonegap InAppViewer: Si vous l'utilisez comme ça: 

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

ça ne marchera pas. InAppViewer ne peut pas ouvrir les fichiers PDF, peu importe si le PDF est un stockage externe ou local.

Mes solutions jusqu'à présent (ce n'était pas l'idée réelle):

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

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

cela ouvrira le PDF dans le navigateur normal et le téléchargera. Après le téléchargement, il vous sera demandé s'il doit l'ouvrir avec un visualiseur PDF. Mais vous devez revenir à votre application et l'ouvrir à nouveau par la suite.

Une autre possibilité serait de le télécharger simplement sur votre carte SD avec l’API Phonegap Filesystem 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 découverte est d’utiliser Google Documents/Lecteur pour l’ouvrir avec l’InAppViewer lié à Google Documents comme celui-ci:

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

Cela ouvrira le PDF dans l'application en le visualisant sur Google Documents. Vous pouvez générer votre lien permanent ici: https://docs.google.com/viewer Ainsi, même si vous modifiez votre fichier pdf, il fonctionnera toujours.

J'espère que ce résumé vous aidera à gagner du temps. S'il y a une autre solution, faites le moi savoir

61
Marc Ster

Android n'a pas la capacité de visionneuse PDf native dans son navigateur (contrairement à iOS 'Safari) . Pour autant que je puisse voir, il y a deux options intéressantes: 

  1. Ignorez le téléchargement et affichez le fichier PDF via les fonctionnalités d'affichage en ligne de Google Doc Viewer, comme indiqué dans cette réponse de StackOverflow

  2. Téléchargez le fichier et utilisez le plug-in FileOpener pour les applications Android Phonegap comme expliqué dans cette réponse StackOverflow . Cela ouvrira le fichier dans le lecteur installé PDF ou offrira un choix à l'utilisateur.

J'ai écrit quelques articles sur le téléchargement et l'affichage d'un PDF sur iOS et de ces options que je montrais dans mon blog pour les développeurs Android Phonegap.

13
EeKay

Essayez de cette façon ça va marcher.

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

La réponse de Marc Ster est très complète. Toutefois, pour ouvrir le fichier PDF avec Google Documents, l'utilisateur doit se connecter avec son compte Google.

Si vous affichez des fichiers PDF situés sur un serveur qui est votre propre, vous pouvez éviter cela et utiliser l'approche suivante: Vous pouvez configurer la bibliothèque PDF.js sur votre serveur. C'est le projet open source sur lequel sont également basés Google Documents pour afficher les fichiers PDF dans un navigateur Web.

Vous pouvez ensuite utiliser le InAppBrowser Plugin pour vous rendre sur votre serveur où se trouve le fichier PDF.js, en spécifiant un chemin pour le fichier pdf à afficher dans l'URL. Le pdf devrait également être sur votre serveur, pour éviter les problèmes de CORS. S'il s'agit d'un pdf externe, 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');
5
Clawish

La vue Web Android n'a pas de visionneuse intégrée PDF. Rediriger l'utilisateur vers l'exemple de visionneuse de documents Google: http://docs.google.com/viewer?url=http://example.com/example.pdf

2
lsolano

Essayez ceci pour ouvrir n'importe quel type de document à partir d'une URL en procédant comme suit:

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

Android: il ouvre les fichiers à l'aide des applications système, le cas échéant, sinon il génère une erreur que vous pouvez gérer.

IOS: Il ouvre les fichiers dans une fenêtre contextuelle, comme la vue avec le bouton Terminé et le bouton Option.

Il ne montre pas votre URL de documents.

La source est disponible ici: https://github.com/ti8m/DocumentHandler

1
SANAT

Je l'ai essayé en ayant le script dans le même fichier HTML et cela a fonctionné pour moi, le seul changement a été que j'ai ajouté l'attribut "alt" à 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>
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