Mostrar PDF dentro del navegador web


84

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

Respuestas:


120

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>

3
Con esta solución, algunos usuarios no ven el archivo PDF, pero Google les pide que inicien sesión primero.
Philipp Zedler

41
Tengo una pregunta sobre esta solución. ¿Google almacenará una copia de mi archivo pdf en sus servidores? ¿Se conservará la privacidad de mi contenido?
hd.

@Alex para saberlo con certeza, intente ... Intentaría -: //docs.google.com/gview? Url =: //path.com/to/your/pdf.pdf&embedded=true como iframe src
bradenkeith

¿Cómo es esto diferente / mejor de la solución de @ Will para configurar directamente el src del iFrame en el pdf? Supongo que el enlace directo dependerá del lado del cliente de software para mostrar realmente el pdf, pero ¿no lo haría Google Docs también?
Félix Gagnon-Grenier

3
@hd. Sí, Google simplemente muestra el PDF a través de su pantalla incorporada. No creo que se queden con una copia, aunque tendrán que traducirla a la visualización página por página, así que en algún momento espero que se conviertan a PNG página por página. Para cualquiera que use esta respuesta, tenga en cuenta que Google tiene un límite de ancho de banda para documentos que no son de Google. Una vez agotado, el PDF no se muestra, solo un mensaje de que se ha excedido el ancho de banda y volver a intentarlo más tarde.
Jon


19

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


El me gusta que publicó no proporciona más información sobre la respuesta.
Daniël W. Crompton

2
la pregunta era ¿Cómo puedo mostrar un pdf dentro de un navegador web en una página .html? usar la etiqueta de objeto html 5 ayudará a ... <object width = "400" height = "400" data = "helloworld.swf"> </object> Utilice este elemento para incrustar multimedia (como audio, video, subprogramas de Java, ActiveX, PDF y Flash) en sus páginas web.
BAKARI SHEGHEMBE

Tiene toda la razón, sin embargo, el enlace a w3schools no brinda más información para complementar la respuesta tal como la escribió.
Daniël W. Crompton

Esto no funcionaría si no tiene ningún visor de PDF en su navegador
Umair Hamid

1
Si eso es verdad. Lo bueno de la etiqueta de objeto es que puede detectarlo. Y le permite poner más opciones para que los visitantes vean la página a través de gdrive, onedrive, etc. <object data = ' example.com/path.pdf#toolbar=1'type='application/pdf ' width = ' 100% 'height =' 700px '> <p> Parece que su navegador web no está configurado para mostrar archivos PDF. No se preocupe, simplemente <a href=' example.com/path.pdf'> haga clic aquí para descargar el archivo PDF. </a> o <a href = " drive.google.com/[drive path] / view? Usp = compartir "> haga clic aquí para ver </a> </p> </object>
BAKARI SHEGHEMBE

19

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


8
no funciona si no tiene el complemento pdf instalado en IE
Collin Anderson

3
¿Cómo es eso obvio? Parece un apéndice útil para "varios navegadores".
showdev

1
esto fue mucho más fácil de configurar que todos los demás de terceros. No sé cómo funcionó en 2011, pero en 2016 es muy rápido y está lleno de funciones útiles. También parece funcionar muy bien en Chrome, FF e IE
slaw

1
No me funciona en Chrome en un teléfono Android: descarga el pdf y lo abre en una aplicación separada (si tiene una). Y no puedo desplazarme a otras páginas en Safari en iOS. Solo veo la primera página del pdf.
Vasiliy Zverev

7

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


Finalmente alguien que sepa de lo que está hablando por esta respuesta. Esta es la mejor respuesta y la más sencilla. @jschorr es absolutamente correcto. El navegador controla esta configuración. ¡¡Más eficiente!!
Val

4

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.


Esta solución funcionó mucho mejor para mí que la respuesta aceptada. También debe tenerse en cuenta que trabajo con cierta información confidencial, por lo que no tener mis documentos disponibles públicamente era importante para mí.
Casper Wilkes


3

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>

1

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.


Esto funciona bien, gracias. Pero, ¿qué pasa en el caso de, si el usuario quiere ver el pdf sin conexión a Internet?
Usuario

puede utilizar la biblioteca JQuery como pdf.js github.com/mozilla/pdf.js .. 2. Consulte PDFObject, que es una biblioteca Javascript para incrustar PDF en archivos HTML. Maneja bastante bien la compatibilidad del navegador y lo más probable es que funcione en IE8.
Asuquo12

0

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.


0

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.


Creo que esto es genial, pero necesita muchos recursos.
eveevans

Pero los usuarios no pueden copiar / pegar texto desde PNG.
Vasiliy Zverev

0

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.



Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.