Visualizar archivos PDF directamente desde el navegador con PDF.js y HTML 5

PDF.js - Visualiza Archivos PDF en la web con HTML5

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

  1. Descarga y compilación.
  2. Plataforma de desarrollo node.js
  3. 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.

 

Sistemas Operativos: 
Tecnologias: 
Actividad: 

Comentarios

Para eso lo ideal es actualizar el navegador y que cargue bien el archivo. Muchas gracias por el artículo!

Imagen de Jean Mazuelos
Enviado por Jean Mazuelos el Sáb, 04/06/2013 - 12:42

Es necesario tener un navegador que soporte HTML 5, aunque ya la mayoría lo tiene implementado. Gracias por tu comentario.

los enlaces a las descargas de pdf.js y el ejemplo dan error 500 Internal Server Error

Gracias a HTML5 podemos ahorrar miles de lineas de codigo con esto:

< embed src=”archivo.pdf” width=”ancho″ height=”alto″ >

Saludos desde El Salvador ;)

Me podria ayudar, tengo una duda como le paso como parametro file un pdf que esta en otro directorio

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?

Imagen de Jean Mazuelos
Enviado por Jean Mazuelos el Mié, 11/19/2014 - 18:55

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)