Incrustar un PDF con PDF.js

Hoy veremos como incrustar un PDF con PDF.js.

PDF.js es un proyecto de software libre de la fundación Mozilla que a grandes rasgos nos permite utilizar un visor de ficheros pdf para la web de forma genérica, la ventaja que tiene es que utilizando pdf.js utilizaremos el mismo visor en todos los navegadores por tanto nos aseguramos que se verá correctamente en la mayoría de los navegadores actuales.

Para descargar pdf.js podemos entrar en su web oficial y descargar la versión estable. Si utilizamos bower como gestor de dependencias nos bastaría con añadir el repositorio o paquete en .zip de la versión estable de pdf.js.

Una vez que tenemos pdf.js instalado en nuestro proyecto ya sea a mano o con bower, utilizaremos el viewer que tiene por defecto para renderizar los pdf que estén subidos en el servidor.

Ahora podremos entrar a la url del viewer http://localhost/pruebas/pdfjs/web/viewer.html?file=URL_DEL_PDF_DE_ESTE_DOMINIO

En mi caso tengo un directorio llamado files que es en el que están los ficheros pdf y se vería así:

incrustar un pdf con pdf.js

Ahora podremos utilizar esa url para meterla en un iframe y mostrarla en nuestra web de esta forma:

<iframe src="http://localhost/pruebas/pdfjs/web/viewer.html?file=http://localhost/pruebas//files/comandos.pdf"></iframe>

Más información:
https://mozilla.github.io/pdf.js/

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *