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éménts 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 !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Hamed Daram sur Unsplash