web-dev-qa-db-fra.com

Comment ouvrir un fichier PDF dans un <iframe>?

Je veux ouvrir le fichier pdf dans un iframe. J'utilise le code suivant:

<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"
   jQuery1640737952376988841="85"> User guide </a>

Il s’ouvre bien dans Firefox, mais pas dans IE8.

Est-ce que quelqu'un sait comment le faire fonctionner également pour IE?

javascripthtmlpdfiframebrowser
31
user1753210

L'utilisation d'un iframe pour "rendre" un PDF ne fonctionnera pas sur tous les navigateurs; cela dépend de la façon dont le navigateur traite les fichiers PDF. Certains les navigateurs (tels que Firefox et Chrome) ont un PDF rendu intégré) qui leur permet d'afficher le PDF inline où certains anciens navigateurs (peut-être d'anciennes versions) de IE essayez de télécharger le fichier à la place).

Au lieu de cela, je recommande de vérifier PDFObject qui est une bibliothèque Javascript pour incorporer des PDF dans des fichiers HTML. Il gère assez bien la compatibilité du navigateur et fonctionnera très probablement sur IE8.

Dans votre code HTML, vous pouvez configurer un div pour afficher les fichiers PDF:

<div id="pdfRenderer"></div>

Ensuite, vous pouvez avoir du code Javascript pour incorporer un PDF dans ce div:

var pdf = new PDFObject({
  url: "https://something.com/HTC_One_XL_User_Guide.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");
38
Aamir

C'est le code pour lier un HTTP (S) accessible PDF à partir d'un <iframe>]:

<iframe src="https://research.google.com/pubs/archive/44678.pdf"
   width="800px" height="600px" >

Violon: http://jsfiddle.net/cEuZ3/1545/

EDIT: et vous pouvez utiliser Javascript à partir de la balise <a> (Événement onclick pour définir l'attribut SRC d'iFrame 'au moment de l'exécution ...

EDIT 2: Apparemment, il s’agit d’un bogue (mais il existe des solutions de contournement):

Les fichiers PDF ne s'ouvrent pas dans Internet Explorer avec Adobe Reader 10.0 - les utilisateurs obtiennent un écran gris vide. Comment puis-je résoudre ce problème pour mes utilisateurs?

20
Andrea Ligios

Il est également important de vous assurer que le serveur Web envoie le fichier avec Content-Disposition = inline. Ce n'est peut-être pas le cas si vous lisez le fichier vous-même et envoyez son contenu au navigateur:

en php ça va ressembler à ça ...

...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...

readfile('localfilepath.pdf')
5
Roey