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. Le script tournera en local, mais vous pouvez l'intégrer de manière automatique dans votre CI/CD.

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 était couramment utilisée, mais elle 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 ???