1. Introducción
El uso de archivos PDF se a convertido casi en el medio preferido para compartir información, desde documentos simples hasta informes de proyectos complejos. Su importancia radica en que pueden ser leídos desde cualquier Sistema Operativo sin que esto signifique la distorsión del contenido del documento.
Desde hace algún tiempo vengo utilizando un aplicativo web(Google Docs Viewer) para poder incorporar mi curriculum en PDF en mi página web sin necesidad de que el cliente tenga que instalar algún plugin innecesario, PDF.js permite realizar esta misma tarea, solo que puedes incluirla dentro de tu propio servidor sin necesitar de terceros y es software Libre (Licencia Apache 2.0).
PDF.js es un proyecto de la Fundación Mozilla el cual consisten en un aplicativo que haciendo uso de tecnologias como HTML 5 y Java Script permite visualizar archivos PDF en tu página web sin necesidad de instalar algún complemento o plug-in en el navegador. El proyecto PDF.js esta desarrollado bajo la Plataforma de Desarrollo Node.js el cual está basado en el motor de Java Script de V8 de Chrome lo cual permite crear aplicaciones en HTML 5 y Java Script multipropósito y escalables.
1.1. Contenidos
- Descarga y compilación.
- Plataforma de desarrollo node.js
- Probando PDF.js
2. Requerimientos
3. Descargar y compilar
3.1. Node.js
Para descargar la Plataforma de Desarrollo Node.js nos dirigimos a la página http://nodejs.org/download/ y descargamos el paquete según nuestra plataforma, para el caso de los paquetes en Windows o Mac OS los instaladores lo dejan listo para ser usado.
En caso de los paquetes compilados para distribuciones GNU/Linux(32bits y 64 bits) el paquete más bien es como un aplicativo portable, lo que hay que hacer es descomprimirlo, dentro de la carpeta descomprimida habrá una carpeta bin en la cual está el comando node, el cual es utilizado para compilar los proyectos.
3.2. Compilando PDF.js
Nota: Puedes descargar el archivo listo para usar en la sección 4 si lo deseas, esta parte del artículo está creado para quien quiera experimentar la compilación con nodejs.
Lo primero que debemos hacer es descargar el código fuente de PDF.js, el proyecto se maneja des GitHub, por lo cual necesitaremos hacer una réplica del repositorio git en nuestra computadora:
git clone git://github.com/mozilla/pdf.js.git pdfjs cd pdfjs
Ahora simplemente debemos compilar el proyecto con node.js:
<ruta completa al binario node> make generic
Y listo!, con estos sencillos pasos se creará la carpeta build en la cual encontraremos el archivo PDF.js el cual no servirá para cargar nuestros PDF desde la Web.
4. Probando PDF.js
Dentro del proyecto compilado existe la carpeta generic y dentro de ella la carpeta web. En la carpeta web están todos los archivos necesarios pada poder cargar nuestro visor PDF, lo primero que tenemos que hacer es ubicar el archivo viewer.js y editar la sentencia DEFAULT_URL hacia el archivo PDF que deseamos abrir:
En mi caso mostraré mi Hoja de Vida(Curriculum Vitae), finalmente cargamos el archivo viewer.html desde un navegador web. Nota: PDF.js está diseñado para ejecutarse desde un servicio web(puedes utiliza Apache, que viene con XAmp en windows), no servirá si lo deseas cargar directamente desde tu disco duro:
Listo!, ya tienes tu propio visor PDF, el cual lo puedes utilizar para mostrar tus archivos PDF ¡sin necesidad de instalar plugins en el navegador!.
Puedes descargar el archivo de ejemplo en la sección de descargas.
Comentarios
Enviado por Actualizar Navegador (no verificado) el Sáb, 04/06/2013 - 02:07 Enlace permanente
Artículo
Para eso lo ideal es actualizar el navegador y que cargue bien el archivo. Muchas gracias por el artículo!
Exactamente
Es necesario tener un navegador que soporte HTML 5, aunque ya la mayoría lo tiene implementado. Gracias por tu comentario.
Enviado por Carlos (no verificado) el Mié, 03/26/2014 - 14:05 Enlace permanente
enlaces rotos
los enlaces a las descargas de pdf.js y el ejemplo dan error 500 Internal Server Error
Enlaces corregidos
Se han corregido los enlaces, gracias por tu tiempo en hacrme saber el problema.
Enviado por Josue Rodriguez (no verificado) el Sáb, 07/26/2014 - 14:11 Enlace permanente
Mas Sencillo ...
Gracias a HTML5 podemos ahorrar miles de lineas de codigo con esto:
< embed src=”archivo.pdf” width=”ancho″ height=”alto″ >
Saludos desde El Salvador ;)
Enviado por julian jaramillo (no verificado) el Lun, 08/04/2014 - 08:43 Enlace permanente
parametros pdf_js
Me podria ayudar, tengo una duda como le paso como parametro file un pdf que esta en otro directorio
Enviado por julian jaramillo (no verificado) el Mar, 08/19/2014 - 11:09 Enlace permanente
Error del visor con pdf/a
Cuando el pdf que quiero ver tiene formato pdf/a no me lo carga el visor, he probado en E10 y E11.... alguna solucion a este caso?
Tal vez deberias probar con
Tal vez deberias probar con otras versiones.
Enviado por Jhon (no verificado) el Mié, 11/19/2014 - 14:58 Enlace permanente
Error en la sentencia DEFAULT_URL
http://prntscr.com/581w6a
Al ejecturar el script el pdf cargado por defecto da error. Por favor, como podria solucionarlo?
Gracias de ante mano.
Saludos.
El problema es debido a que
El problema es debido a que tu servidor está devolviendo la cabecera 204 en vez del PDF.
Puedes intentar lo siguiente:
- Coloca la ruta completa al archivo PDF
- Para verificar que tu servidor WEB esté devolviendo correctamente, accede a la ruta completa del pdf desde una ventana.
Nota :En la actualidad los navegadores ya incorporan un visor PDF, el visor PDF por defecto de mozilla es PDFJS(EL mismo del tutorial)