web-dev-qa-db-fra.com

Afficher PDF dans un navigateur Web

Comment afficher un pdf dans un navigateur Web sur une page .html?

htmlpdfbrowser
73
CodeGuy

J'utilise le visualiseur PDF intégrable de Google Documents. Les documents ne doivent pas nécessairement être téléchargés vers Google Documents, mais ils doivent être disponibles en ligne.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
108
bradenkeith

au lieu d'utiliser iframe et en fonction du third party, pensez à utiliser flexpaper ou pdf.js.

J'ai utilisé pdf.js , cela fonctionne très bien pour moi.

voici la démo: http://mozilla.github.com/pdf.js/web/viewer.html

32
navins

Le moyen le plus simple consiste à créer un iframe et à définir le source sur l'URL du fichier PDF.

(canards fous de concepteurs HTML) Je l'ai fait moi-même, ça fonctionne bien, on navigue dans plusieurs navigateurs (on se retrouve dans un bunker).

18
Will

préféré à l'aide de la balise object

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

notez que vous pouvez modifier la largeur et la hauteur de n’importe quelle valeur visitée http://www.w3schools.com/tags/tag_object.asp

12
BAKARI SHEGHEMBE

Le plug-in du navigateur contrôle ces paramètres, vous ne pouvez donc pas le forcer. Cependant, vous pouvez faire un simple <a href="whatver.pdf"> au lieu de <a href="whatever.pdf" target="_blank">.

6
jschorr

Vous pouvez également intégrer JavaScript à l'aide d'une solution tierce telle que PDFObject .

3
Nils Magne Lunde

Tant que vous hébergez le PDF l'attribut cible est le chemin à parcourir. En d'autres termes, pour les fichiers relatifs, l'utilisation de l'attribut cible avec la valeur _blank fonctionnera parfaitement.

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Pour les chemins absolus, les moteurs iront dans l’ocateur U nified RL et l'ouvriront. Donc, supprimez l'attribut cible.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Les navigateurs feront un bon travail dans les deux cas.

3
ftcosta

Vous pouvez utiliser ce code:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.Adobe.com/products/acrobat/readstep2.html">

Vous pouvez également utiliser le visualiseur PDF intégrable de Google Documents:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
1
Hieu Le

Vous pouvez également avoir cette approche simple GoogleDoc.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

Cela créerait une nouvelle page pour vous permettre de visualiser le document sans déformer votre flux.

1
Asuquo12

La solution simple consiste à le mettre dans un iframe et à espérer que l'utilisateur dispose d'un plug-in qui le supporte.

(Je ne le fais pas, le plugin Acrobat a été une telle ressource et source d'instabilité que je me fais un devoir de le supprimer de tout navigateur qu'il touche).

La solution compliquée mais relativement populaire consiste à l'afficher dans une applet flash.

0
Quentin

Nous rendons les pages de fichier PDF sous forme de fichiers PNG sur le serveur à l'aide de JPedal (une bibliothèque Java.). Cela, combiné à du javascript, nous donne un contrôle élevé sur la visualisation et la navigation.

0
Carles Barrobés