Tengo un auto de archivo PDF generado por itext y tengo que mostrar que el archivo PDF en HTML. Mi pregunta es: Cómo mostrar un local de archivo PDF en HTML utilizando pdf.js? En caso de que el archivo PDF se genera por algunas normas?

InformationsquelleAutor vivek | 2013-07-22

10 Comentarios

  1. 180

    Implementación de un archivo PDF en el código HTML de la página web es muy fácil.

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

    Asegúrese de cambiar el ancho y la altura de sus necesidades.
    Buena suerte!

    • +1 para un simple y solución viable.Saludos
    • Gran solución, simple.
    • Muchas gracias…
    • <iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
    • hombre,has salvado mi precioso tiempo
    • El <embed> etiqueta es nuevo en HTML5, muy conveniente. ver aquíenlace
    • es descargar el archivo en lugar de mostrar ese archivo
    • La mejor manera que se describe en jsgyan.blogspot.en/2017/12/…
    • Esta es, sin embargo, HTML5 solo.
    • Se muestra que el plugin no es compatible en el dispositivo móvil en el navegador chrome.

  2. 36

    Yo uso Google Docs ofrece la posibilidad de integrar visor de PDF. Los documentos no tienen que ser subidos a Google Docs, pero sí tienen que 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>
    • Aquí está el enlace: Embebido de Google Docs
    • Usted necesita usar iframe junto con los documentos de google docs viewer de lo contrario se podría obtener un «Error detectado por la Aplicación de Firewall» del mensaje, en función de su hosting.
    • Tenga en cuenta que este método sólo admite archivos Pdf de hasta 25mb
    • no funciona para mí
    • Solo es un comentario, si quieres insertar un archivo pdf en google drive. Después de hacer clic en el pdf, encontrar «Insertar elemento» va a generar el iframe de HTML.
    • No necesariamente se necesita para estar en línea, usted puede almacenarlos en sus activos a nivel local y punto

  3. 23

    Si quieres usar pdf.js les recomiendo leer ESTE

    También puede subir un documento pdf en algún lugar (como Google Drive) y el uso de su dirección 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>
  4. 10

    puede mostrar fácil en una página html como este

    HTML:

    <embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500">

  5. 8

    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 mostrar pdf en el móvil por este código no es posible, usted debe necesitar un plugin

    si usted no responde a su sitio. A continuación, por encima del código de pdf no se muestran en el móvil, pero usted puede poner la opción de descarga después de que el código

    <embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
    <a href="study/sample.pdf">download</a>
  6. 4

    Formato De Documento Portátil (PDF).

    • Cualquier Navegador » Uso _Embeddable Documento De Google Docs 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>
    • Sólo para chrome navegador » Chrome PDF viewer usando el 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:

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

  7. 4

    He tenido algo parecido antes y se utiliza normalmente etiquetas

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

    pero es interesante conocer algunas otras maneras de arriba!

  8. 4

    La más simple forma es utilizar,

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

    y si su todavía descargado en lugar de ver, compruebe que el servidor encabezado de respuesta, debería tener, Content-Disposition:Inline y no, Content-Disposition:Attachment.

  9. 2

    El uso de Javascript, es posible la visualización de un archivo PDF en HTML a través de Mozilla PDF.JS biblioteca. Para ver un demo.

    Hay también un Visor de PDF Javascript plugin para incrustar archivos PDF. Aquí es un demo. (el plugin no es gratis)

    • Este plugin no es gratis.
    • me gusta este pdf viwer.. que prima plugin es bueno … y muy barato
  10. 0

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

    Línea de fondo: el OBJETO es Bueno, INCRUSTAR es Viejo. Al lado de la IE etiquetas PARAM, cualquier contenido entre las etiquetas OBJECT va a llegar si el navegador no soporta el OBJETO del referido complemento, y al parecer, el contenido se vuelve http solicitado independientemente de si se procesa o no. Referencia

    Código de trabajo: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6

    HTML:

    <!DOCTYPE html>
    <html>
    <body>
    <object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
    </body>
    </html>

Dejar respuesta

Please enter your comment!
Please enter your name here