Visualizar PDFs en HTML
Una manera rápida de visualizar PDFs en HTML es utilizando una herramienta de Google, que funciona como visor de documentos.
Para que el buscador pueda desplegar el documento requiere de herramientas de terceros por ejemplo el visor de Google.
El visor de Google permite cargar PDF con tan solo enviarle la url del documento, el diseño del visor es básico.
Lo único que hay que tener en cuenta es que la url del documento debe de ser accesible desde internet.
Visualizar PDF en sitio HTML
Crea o abre un archivo HTML y agrega la estructura básica.
<!DOCTYPE html>
<html>
<head>
<title>Visor</title>
</head>
<body>
</body>
</html>Entre las etiquetas del body, colocaremos una etiqueta frame que contendrá las instrucciones para visualizar el documento.
Con el código siguiente podemos incrustar un documento PDF.
<iframe src="https://docs.google.com/gview?url=
http://www.educoas.org/portal/bdigital/contenido/valzacchi/ValzacchiCapitulo-2New.pdf
&embedded=true" style="width:100%; height:700px;" frameborder="0" ></iframe>- En la dirección del frame (src) se coloca el visor de google docs que recibirá una url.
- Después de url= se colocará la url del documento PDF.
- &embedded=True indica que el documento sea incrustado a la página.
- Mediante style definimos las medidas del frame para mostrar el documento.
Ejecuta el archivo HTML en tu buscador, podrás ver un resultado similar a esto.
Los documentos con dirección local (localhost) no se visualizan debido a que no son accesibles desde internet. En estos casos se muestra un mensaje de documento no disponible.
Nota: es necesario ejecutar el archivo HTML en un servidor web para que se puedan cargar los scripts de Google docs.
Podría interesarte Visualizar PDF en ASP.Net C#
Observaciones
Este visor de documentos es únicamente para PDFs, otros tipos de formatos como docx, xlsx, pptx, etc. no son cargados.
no me muestra el pdf, sale en blanco en el HTML.
Tengo: url=img/CORDIAL-INVITACION.PDF
El documento PDF debe estar cargado en un servidor que sea accesible públicamente, de lo contrario no se vera como lo indica.
necesito ayuda, p. ver el pdf, con los .jpg no tengo problema.
le dí inspeccionar y pide menu2.css, page2.js y jquery-1.11.2-min.js
Recuerda que como estas usando una herramienta que usa javascript, la pagina que estas creado debes ejecutarlo en un servidor web como Apache o IIS;
de lo contrario tampoco te va a funcionar.
con jquery no hay problema, son los otros 2
Estoy siguiendo todos los pasos a seguir, pero me dice “docs.google.com rechazó la conexión.”, quizas no este funcionando por que el enlace es este “https://drive.google.com/file/d/1qeDFkTDA932Z9UKej95ghyFtNtvf4s-r/view?usp=sharing” y no se si funciona con drive, espero tu respuesta. Muchas gracias
Si es por el enlace de documento que no se carga, drive no genera accesos públicos al documento; para que te funcione el archivo debe estar cargado en un servidor que te permita visualizar documentos públicamente.
Por ejemplo, este documento, al abrir el enlace te carga el pdf sin formato.
Gracias me ayudo bastante