En este post de programación con JavaScript del lado del servidor te mostraré cómo crear un PDF usando Node.js y el paquete html-pdf.

Gracias a esto vamos a generar un PDF usando una plantilla HTML. Aunque al inicio puede parecer complejo verás que en realidad es una forma muy simple de crear facturas, tickets y todo tipo de documentos PDF.

Además de guardar el PDF en el almacenamiento, te enseñaré cómo mostrar el PDF directamente en el navegador usando Express.

Instalando dependencias

Primero instala globalmente html-pdf así:

npm install -g html-pdf

Luego dentro de tu proyecto instala la dependencia igualmente:

npm install html-pdf

La plantilla HTML

Plantilla HTML para crear PDF con Node.js - renderizada en navegador

Plantilla HTML para crear PDF con Node.js – renderizada en navegador

Quiero que quede claro que el resultado de la conversión no será el mismo que cuando vemos el HTML en un navegador web.

Mejor míralo de otro modo: es una forma fácil de crear un PDF en Node.js usando HTML, en lugar de diseñar el PDF usando coordenadas o cosas raras.

Así que no esperes que todas las cosas funcionen y se vean exactamente igual (sobre todo con los estilos). Dicho esto, tenemos la plantilla HTML:

Podemos cargar imágenes locales a través del protocolo file:/// pasando la ruta absoluta del archivo (si pruebas el ejemplo y no te funciona, revisa la ruta) así como cargar imágenes de cualquier lugar de internet.

Como puedes ver en la imagen del encabezado, la plantilla HTML funciona bien. Ya solo falta pasarle los datos desde Node.js y convertirlo a PDF.

Crear PDF y guardar en el almacenamiento

Para este primer ejemplo vamos a crear el PDF con JavaScript del lado del servidor y guardarlo en el disco duro. El código completo queda así:

Primero importamos a html-pdf así como fs. El módulo de fs (filesystem) nos permitirá leer el contenido del archivo HTML como cadena.

Después, en la línea 9, pasamos los valores. Básicamente es remplazar lo que haya entre llaves por el valor verdadero.

Finalmente en la línea 10 creamos el PDF pasándole la cadena HTML y pasamos el resultado a un archivo, indicando en primer lugar la salida y en segundo lugar un callback en donde estamos esperando un posible error.

Al ejecutarlo con: node guardar.js se genera un PDF llamado salida.pdf que se ve así:

PDF creado con JavaScript, Node.js y html-pdf

PDF creado con JavaScript, Node.js y html-pdf

Si te fijas, se ve igual que cuando veíamos el HTML en el navegador. Además, ahora ya estamos pasando el valor. Puedes ver el PDF generado por si todavía te quedan dudas: Ejemplo de PDF creado con Node.js y JavaScript

Generar PDF con Express

El código que te mostré arriba puede ser colocado dentro de una aplicación web de express para guardar el PDF en el almacenamiento cuando un usuario haga una petición a tu sitio web o algo parecido.

Sin embargo puede darse el caso de que quieras generar un PDF con Node.js y mostrarlo directamente en el navegador. Para ello la cosa no cambia mucho. El código interesante es el siguiente:

Como puedes ver ahora invocamos a toStream y en caso de que no haya error, pasamos el stream hacia la respuesta además de poner un encabezado para que el navegador (en caso de soportarlo) muestre el PDF o al menos entienda qué tipo de archivo le estamos enviando.

Si tú todavía no tienes una app de express pero igualmente quieres probar, el código completo de ejemplo es el siguiente:

Recuerda instalar express y las dependencias listadas anteriormente. Después ejecuta el archivo, visita http://localhost:3000 y deberías ver el PDF:

Crear PDF con Node.js y mostrarlo en navegador con Express

Crear PDF con Node.js y mostrarlo en navegador con Express

Poniendo todo junto

Si quieres ver el código completo de ambos ejemplos puedes ver el repositorio de GitHub. Una vez lo tengas descargado abre una terminal en la carpeta del proyecto y ejecuta:

npm install

Una vez hecho eso, ya puedes probar ambos ejemplos ya sea con node guardar.js o node servir.js

Nota: no olvides que necesitas haber instalado Node previamente. Y si te gustan estas tecnologías por aquí te dejo más sobre JavaScript o Node.js.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,597 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: