insertar - Cómo mostrar el archivo pdf en HTML
mostrar pdf en php (8)
Tengo un archivo PDF generado automáticamente por itext y necesito mostrar ese archivo PDF en HTML. Mi pregunta es: ¿Cómo mostrar un archivo PDF local en HTML usando pdf.js ? ¿Ese archivo PDF debe ser generado por algunos estándares?
Al usar Javascript, es posible visualizar un archivo PDF en HTML a través de la biblioteca PDF.JS de Mozilla. Vea aquí para una demostración .
También hay un complemento de JavaScript de PDF Viewer para incrustar archivos PDF. Aquí hay una demostración . (el complemento no es gratis)
En la página html para pc es fácil de implementar
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
pero no es posible mostrar PDF en el móvil con este código, debe necesitar un complemento
si no ha respondido su sitio. Entonces, el código pdf anterior no se muestra en el móvil, pero puede poner la opción de descarga después del código
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
Formato de documento portátil ( PDF ).
Cualquier navegador «Use _Embeddable Google Document Viewer para incrustar el archivo PDF en
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>Solo para Chrome Chrome «Chrome PDF Viewer using 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">
Ejemplo 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>
La implementación de un archivo PDF en su página web HTML es muy fácil.
<embed src="file_name.pdf" width="800px" height="2100px" />
Asegúrese de cambiar el ancho y la altura según sus necesidades. ¡Buena suerte!
Opción OneDrive:
Intenté usar OneDrive y me gustó más, ya que muestra varias opciones, entre ellas, abrir en una pestaña nueva y un cursor cuya página está activa actualmente y también una opción para abrir en una ventana nueva.
Todo lo que necesitas hacer es:
- Cargue su archivo en una cuenta de OneDrive
- Seleccione el archivo y haga clic en "Insertar"
- Copia el código y estás listo para comenzar.
La visualización del archivo OneDrive no necesita que los usuarios inicien sesión en OneDrive y el espectador responde muy bien.
<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 desea usar pdf.js, le sugiero que lea THIS
También puede cargar su PDF en algún lugar (como Google Drive) y usar su URL en un iframe
o
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
Uso el visor de PDF incrustado de Google Docs. Los documentos no tienen que cargarse en Google Docs, pero sí deben estar disponibles en línea.
<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>
puedes mostrarlo fácilmente en una página html como esta
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">