Comment afficher le fichier pdf en HTML
j'ai un fichier PDF généré automatiquement par itext et je dois afficher ce fichier PDF en HTML. Ma question est: comment afficher un fichier PDF local en HTML en utilisant pdf.js ? Ce fichier PDF devrait-il être généré selon certaines normes?
11 réponses
la mise en œuvre d'un fichier PDF dans votre page Web HTML est très facile.
<embed src="file_name.pdf" width="800px" height="2100px" />
assurez-vous de changer la largeur et la hauteur pour vos besoins. Bonne chance!
si vous voulez utiliser pdf.js, je te suggère de lire ce
vous pouvez également télécharger votre pdf quelque part (comme Google Drive) et utiliser son URL dans une iframe
ou
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
j'utilise Google Docs intégrable visionneuse PDF. Les docs ne doivent pas être téléchargés sur Google Docs, 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>
dans la page html pour pc est facile à mettre en œuvre""
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
mais PDF montrer en 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, au-dessus de pdf de code ne pas afficher sur 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>
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">j'ai déjà eu quelque chose de similaire et j'ai utilisé des étiquettes normales
<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 façons comme ci-dessus!
Portable Document Format ( PDF ).
-
tout navigateur" Utiliser _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 google chrome " Chrome PDF viewer à l'aide de 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:[<media type>][;base64],<data></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>
<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>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>en utilisant Javascript, il est possible d'afficher un fichier PDF en HTML via le PDF de Mozilla.Bibliothèque JS. Voir ici pour une démo .
Il ya aussi un lecteur PDF JavaScript plugin pour intégrer les fichiers PDF. Voici une démo . (le plugin n'est pas gratuit)
Le "151940920 plus" simple façon est d'utiliser des,
<iframe src="pdf-link">
</iframe>
et si elle obtient toujours téléchargé au lieu de regarder, Vérifiez l'en-tête de réponse du serveur, il devrait avoir, Content-Disposition:Inline et non, Content-Disposition:Attachment .
option OneDrive:
j'ai essayé D'utiliser OneDrive et l'ai mieux aimé car il montre diverses options, y compris ouvrir dans le nouvel onglet et un curseur dont la page est actuellement active et une option pour ouvrir dans la nouvelle fenêtre.
Tout ce que vous devez faire est:
- Télécharger votre fichier à un compte OneDrive
- sélectionnez le fichier et cliquez sur" intégrer "
- Copiez le code et vous êtes bon aller!
la visualisation du fichier OneDrive n'a pas besoin d'utilisateurs pour se connecter à OneDrive non plus et le spectateur est très réactif.
<iframe src="https://onedrive.live.com/embed?cid=54ED32C07853E1A8&resid=54ED32C07853E1A8%2137025&authkey=AKS95k1Xm-uE1lA&em=2" width="476" height="288" frameborder="0" scrolling="no"></iframe>
Si vous voulez, vous pouvez utiliser la visionneuse.js pour visionneuse pdf son de la meilleure option si vous êtes à l'ouverture d'un fichier présent sur votre hôte d'autre, vous devez télécharger ce fichier jusqu'à maintenant, je n'ai pas encore eu aucune possibilité d'afficher le fichier en binaire formulaire à afficher dans la fenêtre web