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: