Tutoriel : Générer un PDF en NodeJS

Si vous souhaitez créer un pdf en Javascript à partir de NodeJS, vous avez deux solutions :

• Soit vous créez, à la main, votre PDF avec une bibliothèque comme PDFKit par exemple
• Soit vous générez un PDF à partir d'un document HTML

Je vais vous présenter la deuxième solution car elle est plus rapide, elle permet de faire évoluer le rendu de votre document plus facilement et de bénéficier de la puissance de rendu HTML/CSS.

Utiliser Puppeteer

Il est possible de générer un pdf directement depuis le navigateur, en combinant une bibliothèque html2canvas pour transformer le DOM en image, puis d'insérer cette image dans un PDF.

Mais cette solution a un rendu assez bancal, dépendante du navigateur et tout le texte contenu dans le PDF n'est pas sélectionnable, car seulement présent comme image.

En utilisant Puppeteer, on va directement utiliser la fonction "Imprimer en PDF" disponible sous Chromium, de manière automatisée et récupérer un document impeccable !

Pour rappel, Puppeteer est un navigateur headless, c'est à dire qu'il est capable de faire tout ce qu'un navigateur classique effectue, mais sans jamais rien afficher à l'écran, et permet donc d'automatiser de nombreuses tâches comme celle-ci.

Puppeteer permet aussi de crawler des pages web, comme expliqué dans ce tutoriel disponible sur le blog.

Le code

D'abord il faudra installer Puppeteer, pour se faire, il vous suffira d'utiliser la commande suivante :

npm install puppeteer
# or with yarn
yarn add puppeteer

Ensuite, il ne restera plus qu'à créer le script qui va charger une page web, en l'occurence j'ai choisi l'un de mes articles, de lui injecter un peu de CSS afin de cacher des éléments non-voulus (header, cookie-bar, etc...), et de générer notre PDF !

//index.js
const puppeteer = require('puppeteer')
 
async function generatePDF() {

  //We start a new browser, without showing UI
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  const url = 'https://blog.nicolas.brondin-bernard.com/comment-resoudre-les-problemes-daccents-dans-vos-pages-web/';

  //We load the page, one of my blog post (networkidle0 means we're waiting for the network to stop making new calls for 500ms
  await page.goto(url, {waitUntil: 'networkidle0'});
  //We add style to hide some UI elements we don't want to see on our pdf
  await page.addStyleTag({ content:
    `header.site-header,
    #cookie-band,
    .post-full-image,
    .post-full-comments,
    .read-next,
    .site-footer { 
      display: none !important;
    }`
  });

  //Let's generate the pdf and close the browser
  const pdf = await page.pdf({ path: "article.pdf", format: 'A4' });
  await browser.close();
  return pdf;
}

generatePDF();

Grâce à cette méthode, vous pouvez créer un générateur de pdf, soit à partir d'une application web déjà existante, soit à partir d'une application web disponible uniquement à votre back-end qui sera chargé par Puppeteer !