Mostrar PDF dentro del navegador web

¿Cómo puedo mostrar un pdf dentro de un navegador web en una página .html?

Utilizo el visor de PDF integrable de Google Docs. No es necesario que los documentos se carguen en Google Docs, pero 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>

en lugar de usar iframe y dependiendo del tercero, piense en usar flexpaper o pdf.js.

Solía pdf.js , que funciona bien para mí. Aquí está la demostración .

prefirió usar la etiqueta de objeto

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

tenga en cuenta que puede cambiar el ancho y el alto a cualquier valor; visite http://www.w3schools.com/tags/tag_object.asp

La forma más sencilla es crear un iframe y establecer la fuente en la URL del PDF.

(se burla de los diseñadores HTML locos) Lo hice yo mismo, funciona bien, en todos los navegadores (se arrastra hasta el búnker).

El complemento del navegador controla esa configuración, por lo que no puede forzarlo. Sin embargo, puede hacer un simple en <a href="whatver.pdf">lugar de <a href="whatever.pdf" target="_blank">.

Siempre que aloje el PDF, el atributo de destino es el camino a seguir. En otras palabras, para archivos relativos, usar el atributo de destino con el valor _blank funcionará bien.

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Para rutas absolutas motores irán a la T nified R esource L ocator y abrirlo sus. Por lo tanto, suprima el atributo de destino.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Los navegadores harán un buen trabajo en ambos casos.

También puede incrustar usando JavaScript a través de una solución de terceros como PDFObject .

Puedes usar este código:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

O utilice el visor de PDF incrustable de Google Docs:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

También puede tener este sencillo enfoque de GoogleDoc.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

Esto crearía una nueva página para que pueda ver el documento sin distorsionar su flujo.

La solución simple es ponerlo en un iframe y esperar que el usuario tenga un complemento que lo admita.

(No lo hago, el complemento de Acrobat ha consumido tantos recursos y ha sido una fuente de inestabilidad que me aseguro de eliminarlo de cualquier navegador que toque).

La solución complicada, pero relativamente popular, es mostrarlo en un subprograma flash.

Procesamos las páginas del archivo PDF como archivos PNG en el servidor usando JPedal (una biblioteca de Java). Eso, combinado con algo de javascript, nos da un alto control sobre la visualización y la navegación.

Recientemente, necesitaba proporcionar una versión más receptiva y compatible con dispositivos móviles de un documento .pdf, porque las pantallas estrechas de los teléfonos requerían desplazarse mucho hacia la derecha y la izquierda. Para permitir solo el desplazamiento vertical y evitar el desplazamiento horizontal, los siguientes pasos funcionaron para mí:

• Abra el .pdf en el navegador Chrome
• Haga clic en Abrir con Google Docs.
• Haga clic en Archivo> Descargar> Página web
• Haga clic en el documento descargado para descomprimirlo
• Haga clic en el documento HTML descomprimido para abrirlo en el navegador Chrome
• Presione fn F12 para abrir Chrome Dev Tools
• Pegue la copia (document.documentElement.outerHTML.replace (/ padding: 72pt 72pt 72pt 72pt; /, '') .replace (/ margin-right:. *? Pt / g, '')) en la consola y presione Entrar para copiar el documento modificado al portapapeles
• Abra un editor de texto (por ejemplo, Bloc de notas) o, en mi caso, VSCode, pegue y guarde con una extensión .html.

El resultado se veía bien y se podía utilizar tanto en entornos de escritorio como móviles.

Mostrar contenido guardado en formato de archivo PDF / DOC / DOCX es ideal para mostrar el archivo pdf / doc / docx en su página web

¿Ha intentado usar una etiqueta img simple?

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">