Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

Convertir une page html en pdf avec Puppeteer et Node

Quand vient le temps de générer un PDF dans une application, c’est toujours compliqué. Il existe des solutions complètes comme Adobe LiveCyle ou Jasper Report, comme il existe d’autres solutions plus compliquées permettant de construire un PDF en écrivant du code, comme PDFKit par exemple. J’aimerais par contre m’attarder aujourd’hui sur une librairie qu’un collègue m’a présentée en solution à problème que nous avions dans une de nos applications. Nous allons donc voir ensemble Puppeteer pour générer un PDF à partir d’un code en html.

Qu’est-ce que Puppeteer

Puppeteer est une librairie pour node qui permet de contrôler Chrome ou Chromium via le protocol DevTools en mode headless. Elle permet, par exemple, d’accéder à une page web via son url, puis de rendre (render) la page en mémoire pour faire une capture d’écran. Dans cet article, je vais utiliser Puppeteer pour créer une page web vide, lui injecter du code html et générer un PDF à partir de la page web en mémoire.

Création du projet node

Quelque part sur votre machine, créez le projet node :

Créez ensuite un fichier index.html qui contiendra le code du PDF à générer. Je vous laisse un lorem ipsum à copier coller si vous manquez d’inspriration :

Puis, créer un nouveau fichier index.js qu’on ajoutera aussi au script de démarrage npm dans le fichier package.json :

Pour le plaisir :

Résultat :

Yes! Je sais encore coder 😅

Le service de génération de PDF

Pour les besoins de la cause, je vais créer un module de génération de PDF. Ceci nous pemettra de respecter un minimum le principe de responsabilité unique dans notre exemple. Créez un nouveau fichier et ajoutez :

Simple, non? On lance Puppeteer, on créer une nouvelle page, on lui injecte notre code HTML et on sauvegarde le fichier PDF. Pour utiliser ce module, créons un fichier index.js avec le contenu suivant :

Cette bout de code peut paraitre étrange pour les gens qui ne connaissent pas trop JS, mais ça s’appelle « une fonction asynchrone auto-exécutée ». On pourrait voir ça comme un genre de main() dans d’autres langages.

Reste plus qu’à charger notre module et appeler la fonction de conversion pour tester :

Conclusion

Aujourd’hui, vous avez vu comment on peut utiliser un navigateur sans tête pour générer un PDF assez facilement à partir d’un code html. Dans notre cas, nous avons utilisé cette fonctionnalité couplée avec un éditeur WYSIWYG (Quill) pour permettre à nos utilisateur de créer un formulaire de consentement en PDF à partir d’une application web.

Merci de nous lire chaque semaine 🙂 <3

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 30 autres abonnés