Comment afficher un fichier PDF en HTML?

155

J'ai un fichier PDF généré automatiquement par itext et je dois afficher ce fichier PDF en HTML. Ma question est la suivante: comment afficher un fichier PDF local au format HTML en utilisant pdf.js ? Ce fichier PDF devrait-il être généré selon certaines normes?

html  pdf 
— vivek
source
1
Possible duplication de Display PDF dans le navigateur Web
— Rizvan

Réponses:

231

L'implémentation d'un fichier PDF dans votre page Web HTML est très simple.

<embed src="file_name.pdf" width="800px" height="2100px" />

Assurez-vous de modifier la largeur et la hauteur en fonction de vos besoins. Bonne chance!

— Gofilord
source
Excellente solution, simple.
— AugustoL
5
<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
— Ĭsααc t ի ε βöss
La <embed>balise est nouvelle en HTML5, très pratique. voir ici lien
— Belter
2
La meilleure façon est décrite à jsgyan.blogspot.in/2017/12/…
— Suman Bogati
1
Cela montre que le plugin n'est pas pris en charge dans l'appareil mobile sur le navigateur Chrome.
— JWC mai
50

J'utilise la visionneuse PDF intégrable de Google Docs. Les documents ne doivent pas être téléchargés dans Google Docs, mais ils doivent être disponibles en ligne.

<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
— Rahul Sinha
source
1
Voici le lien: Google Docs
— intégrable
Vous devez utiliser iframe avec la visionneuse Google Docs, sinon vous risquez de recevoir un message "Erreur détectée par le pare-feu d'application", en fonction de votre hébergement.
— user890332
1
Notez que cette méthode ne prend en charge que les fichiers PDF jusqu'à 25 Mo
— tommybond
2
Juste un autre commentaire, si vous souhaitez intégrer un fichier pdf dans le lecteur Google. Après avoir cliqué dans le pdf, recherchez "Incorporer l'élément", il générera le HTML iframe.
— Daisy Qin
Il n'a pas nécessairement besoin d'être en ligne, vous pouvez le stocker dans vos actifs localement et le pointer
— Manzur Khan
24

Si vous souhaitez utiliser pdf.js, je vous suggère de lire CE

Vous pouvez également télécharger votre pdf quelque part (comme Google Drive) et utiliser son URL dans un iframe

ou 

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
— Communauté
source
15

vous pouvez afficher facilement dans une page html comme celle-ci 

<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500">
Développer l'extrait

— harun ugur
source
11

Dans la page HTML pour PC est facile à mettre en œuvre

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%">

mais montrer pdf dans mobile par ce code n'est pas possible vous devez avoir besoin d'un plugin

si vous n'avez pas répondu à votre site. Ensuite, le code pdf ci-dessus ne s'affiche pas dans le mobile mais vous pouvez mettre l'option de téléchargement après le code

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
— pradip kor
source
Sur chrome, ça va mais sur IE ne fonctionne pas. Comment faire sur IE
— Hong Van Vit
7

Le moyen le plus simple est d'utiliser,

<iframe src="pdf-link">
</iframe>

et s'il est toujours téléchargé au lieu d'être affiché, vérifiez l'en-tête de réponse du serveur, il devrait avoir, Content-Disposition:Inlineet non Content-Disposition:Attachment,.

— Rohith Murali
source
7

1. Intégration HTML intégrée au navigateur:

<embed
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
    type="application/pdf"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></embed>
<iframe
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

Pro:

  • Aucune limitation de taille de fichier PDF (même des centaines de Mo)
  • C'est la solution la plus rapide

Les inconvénients:

  • Cela ne fonctionne pas sur les navigateurs mobiles

2. Visionneuse Google Docs:

<iframe
    src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

Pro:

  • Fonctionne sur les navigateurs de bureau et mobiles

Les inconvénients:

  • Limite de fichiers de 25 Mo
  • Nécessite du temps supplémentaire pour télécharger la visionneuse

3. Autres solutions pour intégrer le PDF:

NOTE IMPORTANTE:

Veuillez vérifier l'en-tête de réponse HTTP X-Frame-Options. Cela devrait être SAMEORIGIN.

X-Frame-Options SAMEORIGIN;
— Ukr
source
6

Format de document portable ( PDF ).

  • N'importe quel navigateur «Utilisez _Embeddable Google Document Viewer pour intégrer le fichier PDF dans iframe.

    <iframe src="http://docs.google.com/gview?
    url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
    style="width:600px; height:500px;" frameborder="0">
</iframe>

  • Uniquement pour le navigateur Chrome «Visionneuse Chrome PDF utilisant le plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html. 

    <embed type="application/pdf" 
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" 
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" 
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" 
title="CHROME">

Exemple Sippet:

<html>
   <head></head>
   <body style=" height: 100%;">
      <div style=" position: relative;">
      <div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
         <p>An 
            <a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
         </p>
         <!-- To make div with scroll data [max-height: 500;]-->
         <div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
            <img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
            <p>Streaming an Image form Response Stream (binary data) «  This buffers the output in smaller chunks of data rather than sending the entire image as a single block. 
               <a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
            </p>
         </div>
         <div style="float: left; width: 10%; background-color: red;"></div>
         <div style="float: left;width: 49%; ">
            <img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
            <p>Streaming an Image form Base64 String « embedding images directly into your HTML.
               <a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
               <sup>Data URI scheme</sup>
               </a>
               <a href="https://codebeautify.org/image-to-base64-converter">
               <sup>, Convert Your Image to Base64</sup>
               </a>
            <pre>data:[&lt;media type&gt;][;base64],&lt;data&gt;</pre>
            </p>
         </div>
      </div>
      <div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
      <video style="height: 500px;width: 100%;" name="media" controls="controls">
         <!-- autoplay -->
         <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
         <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
      </video>
      <p>Video courtesy of 
         <a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
      </p>
      <div>
         <div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
            <p>Portable Document Format 
               <a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
            </p>
            <div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
               <embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
               <p>Chrome PDF viewer 
                  <a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
                  <sup>extension</sup>
                  </a>
                  <a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
                  <sup> (surfingkeys)</sup>
                  </a>
               </p>
            </div>
            <div style="float: left; width: 10%; background-color: red;"></div>
            <div style="float: left;width: 49%; ">
               <iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
               <p>Embeddable 
                  <a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file: 
<pre>
&lt;iframe 
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"&gt;&lt;/iframe&gt;
</pre>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>
Développer l'extrait

— Yash
source
5

J'ai déjà eu quelque chose de similaire et utilisé normalement des balises

<a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"><strong>click here</strong></a>

mais il est intéressant de découvrir d'autres moyens comme ci-dessus!

— DirWolf
source
2

L'élément est pris en charge par tous les navigateurs et définit un objet incorporé dans un document HTML.

Bottom line: OBJECT est bon, EMBED est vieux. En plus des balises PARAM d'IE, tout contenu entre les balises OBJECT sera rendu si le navigateur ne prend pas en charge le plugin référencé OBJECT, et apparemment, le contenu est demandé par HTTP, qu'il soit rendu ou non. Référence

Code de travail: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6 

<!DOCTYPE html>
<html>
<body>

<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>
Développer l'extrait

— Soufiyan Ansari
source
0

Vous pouvez utiliser

<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>

Ou, si vous voulez qu'il occupe toute la page:

<a href="your_pdf_file_path>Link</a>
— aaron34weston
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.