GENERATE PDF with Puppeteer + Handlebars

Gabriel de Paula Queiroz — Tue, 07 Feb 2023 19:00:11 +0000

In this tutorial, we are going to learn how to generate a PDF using an API.

For this, we will use the following libs

Let's use the lib https://www.npmjs.com/package/puppeteer, which is a chromium for us to manipulate our HTML

We will also use the Handlebars lib https://www.npmjs.com/package/handlebars, which is basically a template compiler.

So the first step is to install these libraries, for that just run

npm install puppeteer handlebars

// or if you are using yarn

yarn install puppeteer handlebars

After installing the libraries, we will create a controller in our API by starting the puppeteer configuration.

class PDFController {

async index(_: Request, response: Response) {
    // Defines the name of the PDF
    const name = 'nodejs-pdf-example.pdf';

    let configLaunch = {
        headless: true, // headless: 
Informs whether the browser should run headless, that is, without a graphical interface
        ignoreDefaultArgs: ['--disable-extensions'],
    };

    // Start the puppeteer
    const browser = await puppeteer.launch(configLaunch);

    // Open new page
    const page = await browser.newPage();
    const waitUntil = 'networkidle2';
}

export default new PDFController();

Now, let's add our HTML, which will serve as the base of our PDF

...
    // getting the template
    const templateDir = resolve(__dirname, '..', 'views', 'template-pdf.hbs');
    const file = fs.readFileSync(templateDir, 'utf-8');

    // compiling
    const fileCompiled = Handlebars.compile(file);

    // getting the template in string
    const fileHTML = fileCompiled({})
...

After that, let's integrate our HTML with the puppeteer. The puppeteer has his own method to generate the pdf.

    await page.setContent(fileHTML, {
        waitUntil,
    });

    await page.setDefaultNavigationTimeout(0);

    // generate PDF
    await page.pdf({
        format: 'A4',
        path: `tmp/${name}`,
        displayHeaderFooter: false,
        preferCSSPageSize: false,
        printBackground: true,
    });

    await browser.close();
    const pdfFile = fs.readFileSync(`tmp/${name}`);

    // Removing PDF file from the temp folder
    fs.unlinkSync(`tmp/${name}`);

    // return the PDF
    response.contentType('application/pdf');
    response.send(pdfFile);

And the complete code should look like this:

import { Request, Response } from "express";
import puppeteer from "puppeteer";
import fs from 'fs'
import { resolve } from "path";
import Handlebars from "handlebars";

class PDFController {
async index(_: Request, response: Response) {
    const name = 'nodejs-pdf-example.pdf';

    let configLaunch = {
        headless: true, 
        ignoreDefaultArgs: ['--disable-extensions'],
    };

    const browser = await puppeteer.launch(configLaunch);

    const page = await browser.newPage();
    const waitUntil = 'networkidle2';

    const templateDir = resolve(__dirname, '..', 'views', 'template-pdf.hbs');
    const file = fs.readFileSync(templateDir, 'utf-8');
    const fileCompiled = Handlebars.compile(file);
    const fileHTML = fileCompiled({})

    await page.setContent(fileHTML, {
        waitUntil,
    });

    await page.setDefaultNavigationTimeout(0);

    await page.pdf({
        format: 'A4',
        path: `tmp/${name}`,
        displayHeaderFooter: false,
        preferCSSPageSize: false,
        printBackground: true,
    });

    await browser.close();
    const pdfFile = fs.readFileSync(`tmp/${name}`);

    fs.unlinkSync(`tmp/${name}`);

    response.contentType('application/pdf');
    response.send(pdfFile);
}

export default new PDFController();

Hope I was able to help!

The full project directory is at: https://github.com/gabrielqueirozdev/nodejs-pdf-example

If you have any suggestions for improvement, please contact me.

👋🏼

Socket.io + Bull 📨

Gabriel de Paula Queiroz — Thu, 02 Apr 2020 15:22:23 +0000

Introdução

Recentemente tive uma certa dificuldade na implementação de um socket em uma queue.
Precisava que ao completar o processo da queue, o servidor se comunicasse com o client, e como sou um desenvolvedor que está começando a mexer com node.js, consegui solucionar o problema com as ferramentas que tenho ao meu alcançe.

Modificando o Socket.io 🔧

O primeiro passo foi adaptar o socket. Segui a orientação de um amigo, onde ele mostra como faz o desacoplamento.

How to uncouples emit events from connection event into socket.io

Mas como nem tudo cai do céu, precisei fazer algumas alterações...

const socketio = require('socket.io');

let instance = null;

class SocketService {
    static Initialize(server) {
        instance = socketio(server);
        instance.on('connection', socket => {
            console.log('connected');
        });

        return instance;
    }

    static getInstance() {
        return instance;
    }
}

module.exports = SocketService;

Alterando o app.js 🔁

No app.js inicializei o SocketService, e com isso consegui ter uma instância da biblioteca para usar em qualquer lugar do sistema.

const express = require('express');
const http = require('http');
const SocketService = require('./services/SocketService');

const app = express();
const server = http.Server(app);

app.set('socketService', SocketService.Initialize(this.server));

app.use(express.json());

server.listen(3333);

E como vou aplicar isso na fila? 🦏

É bem simples, basta pegar a instância que foi criada no app.js!

Caso queira saber mais sobre o bull, clique aqui

const alertQueue = new Queue(AlertQueue.key, redisConfig);
const socket = Socket.getInstance();

alertQueue.on('completed', job => {
    socket.emit('message', 'Mensagem que será entregue ao client.');
});

Conclusão 🙌🏽

Espero que possa ter ajudado de alguma maneira e fique a vontade para entrar em contato caso tenha alguma duvida!