Generar PDF desde NodeJS con la librería html-pdf

Existen diferentes alternativas para crear ficheros PDF desde NodeJS.

Después de probar varias opciones, la que más me ha convencido es la librería html-pdf que será la que vamos a utilizar en este tutorial.

Lo interesante de esta librería es que podemos crear los ficheros PDF desde una página web, es decir, desde un código HTML.

Aparte, tenemos muchas opciones como la de añadirle cabeceras y pies de página a las páginas que componen el documento PDF, haciendo que el PDF tenga un aspecto más profesional.

Estos detalles son interesantes como por ejemplo para añadir en documentos que vamos a utilizar como tutoriales de desarrollo o similares.

Si queréis ver las diferentes opciones con más detalle, lo podéis hacer desde el repositorio oficial de esta librería.

En el artículo os voy a enseñar como iniciaros con esta librería para crear un par de ejemplos muy sencillos, de los cuales nos van a ser útiles en futuro para poder ir profundizando y a base de práctica crear mejores documentos.

Recordad, que el PDF se crea con el código HTML, por lo que todo lo que consigáis dependerá de vuestras habilidades ;)

Con todo esto, vamos a empezar a trabajar con ello.

1.- Inicio del proyecto

Crear el directorio del proyecto y accedemos a el

mkdir node-medium-pdf && cd node-medium-pdf

Creamos el fichero package.json sin el asistente:

npm init -y

Nos dará un fichero con este contenido:

2.- Instalación del paquete html-pdf y primer ejemplo

Ahora vamos a instalar la librería html-pdf que la encontramos en el repositorio de paquetes de NPM:

npm install html-pdf

Una vez que tengamos el paquete instalado, creamos el fichero pdf.js dentro del directorio donde estamos trabajando y añadimos el siguiente código:

Lo que hará este script es lo siguiente:

• Línea 1: añadimos en una costante el contenido del html-pdf mediante el require.
• Línea 3–6: Creamos una constante con un poco de contenido HTML.
• Línea 8: Llamamos al método create() de html-pdf, el que añadimos como parámetro la constante “content” con el contenido del HTML sencillo que hemos añadido.
• Línea 8 (continuación): Llamamos a la función para dar salida el fichero que vamos a crear y especificamos el nombre de ese fichero con el nombre “html-pdf.pdf”, esto lo especificamos en el primer parámetro y en el segundo añadimos una función anonima que es un callback para realizar las acciones que creemos que pueden ser oportunas para cuando se ha generado el PDF.
• Línea 9: Nos comprueba si ha dado error, y en el caso de que así sea lo imprime por consola en la línea 10.
• Línea 11: En el caso de que no de error, nos muestra la información del fichero creado.

Ejecutamos el siguiente comando para ejecutar el script del fichero pdf.js:

node pdf.js

Si el fichero se ha creado correctamente, debemos de poder verlo en el directorio que estamos trabajando con el nombre html-pdf.pdf. Ejecutamos para abrirlo y nos aparecerá algo de este estilo:

Como podéis ver, ya hemos conseguido crear nuestro primer PDF desde NodeJS utilizando un código HTML muy sencillo.

3.- Ejemplo aplicando CSS

Ahora, vamos a hacer algo más “complejo”. Vamos a añadirle estilos CSS y esto lo podemos hacer de la siguiente manera, añadiendo en el HTML las cabeceras y partes necesarias para añadir código CSS.

Lo único que vamos a modificar es la constante “content” donde vamos a añadirle el CSS para pintar el título (etiquetas h1) en verde.

El resultado será el siguiente, como podéis ver ya tenemos el título en verde:

Extra — Encabezados y pies de página

Vamos a configurarlo en el propio código HTML con el que estamos trabajando, que va a ser más sencillo y si queréis ver las diferentes alternativas tenéis la fuente para acceder a las diferentes configuraciones y opciones que nos ofrece esta fabulosa librería.

Para colocar las cabeceras y pies de página tenemos que usar elementos que colocamos con un identificador específico como “pageHeader” o “pageFooter”.

También se pueden definir cabeceras o pies de página específicos para la primera página con “pageHeader-first” o “pageFooter-first”. Existen otros ids como “pageFooter-last”, “pageHeader-2”, “pageFooter-3”… Esto os dejo para que lo probéis y cacharréis

Este código lo añadimos junto con el HTML con el que estamos trabajando, quedando de la siguiente manera:

Si ejecutamos para crear el PDF y lo abrimos, veremos el encabezado y el pie de página que hemos especificado

El resultado lo podéis encontrar en el siguiente repositorio:

https://gitlab.com/mugan86/medium-node-html-pdf