¿Cómo mostrar un archivo PDF en HTML?

155

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 ? ¿Debería ese archivo PDF ser generado por algunos estándares?

html pdf

— vivek
fuente

1

Posible duplicado de Display PDF dentro del navegador web

— Rizvan

230

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!

— Gofilord
fuente

Gran solución, simple.

— AugustoL

55

<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>

— Ĭsααc t ի ε βöss

La <embed>etiqueta es nueva en HTML5, muy conveniente. ver enlace

— Belter

2

La mejor manera se describe en jsgyan.blogspot.in/2017/12/…

— Suman Bogati

1

Muestra que el complemento no es compatible con dispositivos móviles en el navegador Chrome.

— JWC Mayo

50

Uso el visor de PDF incrustable de Google Docs. Los documentos no tienen que cargarse en Google Docs, pero sí deben estar disponibles en línea.

<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
fuente

1

Aquí está el enlace: Google Docs

— integrables

Debe usar el iframe junto con el visor de documentos de Google; de lo contrario, podría recibir un mensaje de "Error detectado por el firewall de la aplicación", dependiendo de su alojamiento.

— user890332

1

Tenga en cuenta que este método solo admite archivos PDF de hasta

— 25 MB

2

Solo un comentario adicional, si desea incrustar un archivo pdf en la unidad de google. Después de hacer clic en el pdf, busque "Insertar elemento", generará el iframe HTML.

— Daisy Qin

No necesariamente necesita estar en línea, puede almacenarlo en sus activos localmente y señalarlo

— Manzur Khan

24

Si quieres usar pdf.js, te sugiero que leas ESTO

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>

— Comunidad
fuente

15

puede mostrar 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">

Expandir fragmento

— harun ugur
fuente

11

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 se puede mostrar el pdf en el móvil con este código, debe necesitar un complemento

si no ha respondido a su sitio. Luego, 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>

— pradip kor
fuente

En Chrome está bien, pero en IE no funciona. ¿Cómo se puede hacer en IE

— Hong Van Vit

7

La forma más simple es usar,

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

y si todavía se está descargando en lugar de ver, verifique el encabezado de respuesta del servidor, debería tener, Content-Disposition:Inliney no Content-Disposition:Attachment,.

— Rohith Murali
fuente

7

1. Incrustación en línea HTML nativa del navegador:

<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:

Sin limitaciones de tamaño de archivo PDF (incluso cientos de MB)
Es la solución más rápida

Contras:

No funciona en navegadores móviles

2. Visor de documentos de Google:

<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:

Funciona en escritorio y navegador móvil

Contras:

Límite de archivo de 25 MB
Requiere tiempo adicional para descargar el visor

3. Otras soluciones para incrustar PDF:

NOTA IMPORTANTE:

Verifique el encabezado de respuesta HTTP X-Frame-Options. Debería ser SAMEORIGIN.

X-Frame-Options SAMEORIGIN;

— Ukr
fuente

6

Formato de documento portátil ( PDF ).

Cualquier navegador «Use _Embeddable Google Document Viewer para incrustar el archivo PDF 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 el navegador Chrome «Visor de PDF de Chrome con complemento 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">

Sippet de ejemplo:

<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>

Expandir fragmento

— Yash
fuente

5

He tenido algo similar antes y usé etiquetas normalmente

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

¡pero es interesante descubrir algunas otras formas como las anteriores!

— DirWolf
fuente

2

El elemento es compatible con todos los navegadores y define un objeto incrustado dentro de un documento HTML.

En pocas palabras: OBJETO es bueno, EMBED es viejo. Además de las etiquetas PARAM de IE, cualquier contenido entre las etiquetas OBJECT se representará si el navegador no es compatible con el complemento referido de OBJECT, y aparentemente, el contenido se solicita http independientemente de si se representa o no. Referencia

Código de trabajo: 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>

Expandir fragmento

— Sufiyan Ansari
fuente

0

Puedes usar

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

O, si quieres que ocupe toda la página:

<a href="your_pdf_file_path>Link</a>

— aaron34weston
fuente