Creando PDFs en un servidor — ExpressJS
Crear PDFs en el BackEnd de una aplicación es relativamente sencillo, y existen múltiples herramientas para poder realizarlo, en esta lectura aprenderás a realizarlo desde ExpressJs incluyendo imágenes y css externo, utilizando Puppeteer, una herramienta versátil la cual entre sus funcionalidades tiene el poder generar PDFs.
Antes de iniciar — El código completo del proyecto lo pueden encontrar en el siguiente enlace: https://github.com/OscarMartinez98/puppeter_PDF
Lo primero que haremos sera iniciar un nuevo proyecto de Node en un directorio de nuestra elección con el siguiente comando
npm init -yInstalamos todas las dependencias que vamos a necesitar en el proyecto
npm i express fs-extra handlebars puppeteerAgregamos un archivo .gitignore en el que agregamos las siguientes reglas
/node_modules
package-lock.json
*.pdfCreamos dos directorios en nuestro proyecto
src — Aquí se alojara nuestro código del servidor
public — Colocaremos los archivos necesarios para poder generar nuestros PDFs (css, html e imágenes).
De esta forma la estructura del proyecto quedara así:
Dentro de public colocaremos los siguientes archivos:
materialize.min.js Con este archivo daremos unos cuantos estilos a nuestro PDF, su documentación se puede encontrar en https://materializecss.com/
image1.jpg Una imagen de ejemplo que colocaremos en nuestro PDF
template.hbs Nuestra plantilla de hbs donde colocaremos nuestros datos
Dentro de src generaremos dos archivos
data.json Desde aquí extraeremos la información que se colocara en nuestro motor de plantillas, para este ejemplo la información sera:
index.js Aquí por el momento nos limitaremos a declarar las bibliotecas que vamos a necesitar, instanciar el servidor y definir la carpeta de archivos estáticos
Con la ayuda de nuestro motor de plantillas(hbs) crearemos una función dentro del mismo index.js que se encargara de meter nuestros datos del data.json en una plantilla .hbs a partir de dos parametros:
templateData: El nombre de nuestra plantilla hbs en la cual colocaremos los datos.
data: Nuestro archivo data.json que generamos previamente.
Regresaremos content, un string con toda la información(templateData y data) mezclada en el formato apropiado para generar un html.
Ahora dentro de la función server.listen colocaremos el siguiente código
puppeter.launch() Inicializa una instancia de puppeteer.
browser.newPage() Crea una nueva pagina virtual de navegador.
compile(‘template’, data) Mezcla el contenido de nuestro template de hbs con la información del json
page.setContent(content) Dentro de nuestra pagina virtual colocamos el contenido generado en compile.
page.emulatedMedia(‘screen’) Determina que tipo de css que se desplegara en nuestra pagina virtual, en este caso ‘screen’.
page.pdf Esta es la función que hace la magia, en ella es donde generamos al fin nuestro PDFy contiene los siguientes atributos:
— — path El nombre y ruta donde se guardara nuestro PDF recién creado.
— — format El tamaño de la hoja.
— — printBackground Imprime el contenido de nuestro fondo de pantalla en caso de que lo tengamos.
— — margin Define el tamaño de los margenes que vamos a tener en nuestro PDF.
browser.close() Por ultimo cerramos nuestra pagina virtual.
Listo! Ahora tenemos un PDF, totalmente funcional.
Ciertamente no es el diseño mas bonito, pero es suficiente para este ejemplo, sin embargo, aun quedan algunas dudas que resolveremos a continuación.
¿Porque debemos crear un servidor en EspressJS y no crear directamente el PDF? Esto se debe a que los archivos estáticos los debe requerir de una URL a la que se pueda acceder, por lo tanto archivos que están en nuestro gestor de archivos local no están disponibles directamente, para eso creamos un servidor local con ExpressJS y definimos una carpeta de archivos estáticos.
¿Este proceso parece un poco engorroso, tiene ventajas realmente crear PDF en Back y no en Front, donde hay mas herramientas para poder hacerlo? Ciertamente no es algo tan sencillo como me gustaría, pero tiene sus ventajas y desventajas, sin embargo explicarlas haría esta publicación muy extensa, por lo que dejo un hilo en Reddit en el cual se discute esta premisa
https://www.reddit.com/r/javascript/comments/f5r772/askjs_generating_pdf_on_the_frontend_vs_backend/
Esto es todo para mi primera publicación, espero les haya gustado, pronto publicare mas tutoriales de algunas cosas que sé y otras que voy aprendiendo.
:)
