Existen muchas alternativas para implementar en nuestras aplicación la generación de PDFs. En este caso voy hablar de PhantomJS, una herramienta que ofrece bastantes funcionalidades, pero hoy vamos a conocer como esta herramienta nos puede ayudar a la generación de PDFs basados en HTML. En otros artículo hablé de otra alternativa como es wkhtmltopdf totalmente integrado con Symfony para convertir HTML en documentos PDF.
Este tipo de herramientas son muy útiles para generar informes, cartas, documentos oficiales, etc… Sin embargo la desventaja que tiene wkhtmltopdf respecto a otras herramienta es que no interpeta código javascript, por lo que no podríamos utilizar muchas librerías de gráficos. Por ello hoy el artículo va dedicado a esta fantástica herramienta.
¿Que es PhantomJS?
PhantomJS es una implementación del motor de javascript WebKit, el cual permite trabajar y renderizar páginas webs desde el servidor. Gracias a WebKit nos permite renderizar páginas y trabajar con el arbol DOM de éstas. La herramienta tiene muchas utilidades, ya que podemos emplearla para realizar tests de UI como lo haría Selenium, pero también puede ser útil en el scrapping de paginas webs, capturas de pantalla o monitorización de webs. Básicamente una herramienta que nos abre un abanico de posibilidades para automatizar procesos.
PhantomJS se podría definir como un navegador web sin interfaz gráfica ejecutable por linea de comandos y controlable a través de una API Javascript. La gran ventaja de esta herramienta es que soporta Canvas, SVG y Javascript, permitiéndonos actuar con la web como si lo hicieramos desde un navegador tradicional.
Instalación
Para utilizar Phantom tenemos que descargar la versión que queramos y a partir de ahí, empezar a jugar. Igualmente se puede instalar desde Node Package Manager (NPM) o en caso de Mac desde brew. Personalmente aconsejo la instalación desde linea de comandos. Igualmente podéis entrar en la web oficial para seguir el proceso de instalación.
Procederemos a instalar PhantomJS con npm. El parámetro -g sirve para indicar que se instale para todo el sistema:
|
1 |
sudo npm install phantomjs -g |
También podemos ejecutar el comando phantomjs --version para comprobar que se ha instalado correctamente.
Ejemplo de Uso
Para el ejemplo vamos a usar su apartado de Screen Capturing. Este modulo nos permite capturar nuestra web y exportarla a formatos PNG, JPEG, PDF… Esto es muy útil y personalmente lo he usado en varios proyectos para exportar informes con gráficos realizados en tecnología web. Para hacer la prueba vamos a exportar a pdf un gráfico realizado con la librería ChartJS que aparece en los ejemplos de su documentación:
http://www.chartjs.org/samples/latest/charts/line/basic.html
Vamos a ver el código necesario para renderizar esta url y exportarla a formato pdf. Para ello creamos el siguiente documento render.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var page = require('webpage').create(); var width=1280; var height=1024; page.viewportSize = {width: width, height: height}; page.paperSize={ format: 'A4', orientation: 'portrait', margin: '1cm' } page.open( 'http://www.chartjs.org/samples/latest/charts/line/basic.html', function( status ) { console.log( "Status: " + status ); if ( status === "success" ) { // wait to the website load fully setTimeout( function() { page.render( 'example.pdf' ); phantom.exit(); },2000); } }); |
Para ejecutar este código desde nuestra terminal ejecutamos el siguiente comando:
|
1 |
phantomjs render.js |
El resultado obtenido lo podemos ver en el siguiente enlace: https://www.dropbox.com/s/bpkz26hvnfozmer/example-phantom.pdf
Como puedes comprobar podemos maquetar en HTML el contenido de nuestro informe y generarlo de esta manera pudiendo incluir elementos como gráficos, svgs o canvas. Espero que te resulte interesante.
