Générer un PDF avec Node.js et Puppeteer

Vous en avez marre de maintenir votre script de génération de fiche produit PDF (ou votre CV), générez les directement à partir de votre site avec Node.js et Puppeteer.

Pire que la mise en page d'un fichier Word, la mise en page d'un PDF généré par un script... Simplifiez-vous la vie en convertissant directement vos pages web en PDF.

Introduction

Nous allons voir ici comment créer un script Node.js qui vous permettra de générer un PDF à partir d'une page de votre site, dans mon exemple, cela sera ma page CV. Le script tournera en local, mais vous pouvez l'intégrer de manière automatique dans votre CI/CD, je ferai un article plus tard sur le sujet.

Installation

La seule dépendance dont vous avez besoin, Puppeteer qui est un navigateur headless (ou plutôt, il contrôle votre navigateur).

npm install -D puppeteer

Attention si vous utilisez PhantomJS ! La librairie est officiellement stoppée car elle génére de trop grosses failles de sécurité.

Le script complet

tools/pdf-generator.js

// Chargement des dépendances
const puppeteer = require('puppeteer');

(async () => {
    // Lancement de Puppeteer
    const browser = await puppeteer.launch({
        headless: true
    });
    
    // Ouverture et navigation vers la page à convertir
    const page = await browser.newPage();
    await page.goto('http://localhost/ma-super-page-a-convertir', {waitUntil: 'networkidle2'});
    
    // Génération du PDF
    await page.pdf({
        // Chemin vers le PDF relatif à la racine de votre projet
        path: 'src/pdf/mon-super-pdf.pdf',
        format: 'A4',
        // N'oubliez pas de forcer le printBackground à true
        // Car il est possible que dans votre style CSS cela soit l'inverse pour plus d'éfficacité
        // Mais là on veut du beau
        printBackground: true,
        margin: {
            top: '0.5cm',
            right: '0.5cm',
            bottom: '0.5cm',
            left: '0.5cm'
        }
    });

    // Fermeture du navigateur et fin du script
    await browser.close();
})();

Lancement du script

Pour que le script fonctionne, il faut que votre site soit lancé et l'URL en localhost accessible.

Pour plus de praticité, pensez à ajouter le script dans votre package.json.

{
    "scripts": {
        "pdf:build": "node tools/pdf-generator.js"
    }
}

Conclusion

Avec ceci, vous avez la possibilité de faire de beaux PDFs rapidement, automatiquement mis à jour et ne nécessitant pas une énième source de données et d'erreur.

Le style de vos PDFs sera logiquement basé sur votre feuille de style avec la media query print.
C'est parfait, vous avez déjà cela d'implémenté sur votre site... N'est-ce pas ???

Et si vous voulez voir ce que cela donne, il y a un lien en haut à droite sur ma page CV et ce PDF est bien généré via ce script, tout comme ses versions anonymisées.