web-dev-qa-db-fra.com

Comment afficher un fichier pdf en HTML

J'ai un fichier PDF généré automatiquement par itext et j'ai besoin d'afficher ce fichier PDF en HTML. Ma question est la suivante: Comment afficher un fichier PDF local en HTML à l'aide de pdf.js? Ce fichier PDF doit-il être généré par certaines normes?

htmlpdf
119
vivek

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 changer la largeur et la hauteur selon vos besoins. Bonne chance!

180
Gofilord

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="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
35
Rahul Sinha

Si vous voulez utiliser pdf.js, je vous suggère de lire THIS

Vous pouvez également télécharger votre fichier 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>
23
user2365865

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">
10
harun ugur

Dans la page html pour pc est facile à mettre en œuvre

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

mais l'affichage de pdf dans mobile par ce code n'est pas possible vous devez avoir un plugin

si vous n'avez pas réagi à votre site. Ensuite, le code pdf ci-dessus ne s'affiche pas sur le mobile, mais vous pouvez insérer une 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>
8
pradip kor

Format de document portable ( PDF ).

  • N'importe quel navigateur "Utilisez _ Visionneuse de documents Google incorporable pour incorporer 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>

  • Navigateur uniquement _ chrome "Chrome PDF à l'aide du plug-in. 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>
4
Yash

Le le plus simple moyen est d'utiliser,

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

et si son téléchargement est toujours téléchargé au lieu de l’afficher, vérifiez l’en-tête de réponse du serveur. Il doit alors avoir Content-Disposition:Inline et non _ Content-Disposition:Attachment.

4
Rohith Murali

J'ai eu quelque chose de similaire avant 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 méthodes comme ci-dessus!

4
DirWolf

En utilisant Javascript, il est possible d'afficher un fichier PDF en HTML via la bibliothèque PDF.JS de Mozilla. Voir ici pour une démo .

Il existe également un plug-in PDF Viewer Javascript pour intégrer des fichiers PDF. Voici une démo . (le plugin n'est pas gratuit)

2
Useful Angle