Generar PDF desde NodeJS con la librerĂ­a html-pdf

Anartz Mugika Ledo🤗

--

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

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Anartz Mugika Ledo🤗
Anartz Mugika Ledo🤗

Written by Anartz Mugika Ledo🤗

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

Responses (5)

Write a response