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

Anartz Mugika Ledoūü§ó
4 min readOct 13, 2019

--

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

--

--

Anartz Mugika Ledoūü§ó

[{#frontend:[#mobile:{#android, #kotlin, #ionic}}, {#web:{#angular, #qwik, #bootstrap}}],{#backend: [{#graphql, #nestjs,#express, #mongodb, #mysql}]}]