Guide complet de la génération de PDF avec Puppeteer : des documents simples aux rapports complexes

Puppeteer est une bibliothèque Node.js qui automatise les navigateurs Chrome ou Chromium, ce qui en fait un outil puissant pour créer des PDF. Que vous créiez des documents simples ou des rapports complexes, Puppeteer propose des fonctionnalités telles que la prise en charge native des PDF, les mises en page personnalisées et l'intégration de l'automatisation pour fluidifier le processus.

Fonctionnalités clés de Puppeteer pour la génération de PDF :

• Configuration simple : utilisez le navigateur headless basé sur Puppeteer et commencez à générer des PDF avec quelques lignes de code.
• Mises en page personnalisables : ajustez le format de page, l'orientation, les marges et bien plus encore.
• Contenu dynamique : affichez des pages riches en JavaScript, appliquez des styles personnalisés et incluez des en-têtes, pieds de page et numéros de page.
• Performances : plus rapide que des alternatives comme Selenium pour la création de PDF.
• Évolutivité : gère la génération de PDF à grande échelle, même pour des milliers de documents par jour.

Pourquoi est-ce utile :

Puppeteer est idéal pour automatiser des workflows, générer des rapports ou exporter du contenu web. Des entreprises qui créent des documents à leur image aux développeurs qui gèrent des visualisations de données, Puppeteer simplifie le processus et garantit des résultats de haute qualité.

Si vous êtes prêt à vous lancer, cet article vous guide à travers la configuration, la personnalisation et les fonctionnalités avancées telles que la gestion de rapports volumineux et la résolution des problèmes courants.

sbb-itb-23997f1

Commencez à utiliser le navigateur headless sur Latenode pour convertir des fichiers, automatiser la surveillance du web et bien plus encore !

Latenode dispose d'une intégration directe avec un navigateur headless basé sur Puppeteer, ce qui vous permet d'intégrer cette bibliothèque à vos workflows d'automatisation pour extraire des données de sites web, prendre des captures d'écran, convertir des fichiers et même automatiser des services qui ne disposent pas d'API.

Vous pouvez ajouter du code de toute complexité, y compris des scripts de conversion de HTML en PDF. Une fois le nœud configuré, vous pouvez le relier à de nombreuses autres intégrations afin d'améliorer votre automatisation : des modèles d'IA comme ChatGPT, des bases de données comme Airtable, des systèmes CRM comme Webflow et de nombreuses autres intégrations.

Commencez dès maintenant à utiliser le navigateur headless pour accélérer, améliorer et simplifier votre travail !

Configuration PDF de base avec Puppeteer

Pour commencer à créer des PDF avec Puppeteer, vous devez le configurer correctement et comprendre ses options de configuration de base. Voici un guide rapide pour vous aider à démarrer.

Création de votre premier PDF

Pour générer un PDF de base à partir d'une page web, créez un fichier app.js avec le code suivant :

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.freecodecamp.org/', {
        waitUntil: 'networkidle0'
    });
    await page.pdf({ 
        path: 'example.pdf',
        format: 'Letter'
    });
    await browser.close();
})();

Ce script présente le workflow essentiel : lancer un navigateur, ouvrir une page, accéder à une URL, générer le PDF et fermer le navigateur.

Paramètres de page et mise en page

Puppeteer vous permet d'ajuster différents paramètres pour la création de PDF. Voici quelques options clés que vous pouvez modifier :

Lorsque vous générez des PDF à partir de pages web, utilisez l'option waitUntil: 'networkidle0'. Elle garantit que toute l'activité réseau est terminée avant la génération du PDF [3].

Pour du contenu HTML personnalisé, vous pouvez créer des PDF à partir de fichiers locaux. Cette approche est particulièrement utile pour les documents basés sur des modèles ou le traitement par lots. Mettez à jour la fonction page.goto() comme suit :

await page.goto(`file://${absolutePath}`, {
    waitUntil: 'networkidle0'
});

Comme Puppeteer s'appuie sur le moteur de rendu de Chrome, tous les styles CSS et formats pris en charge par Chrome apparaîtront fidèlement dans vos PDF. Pour des besoins plus complexes, vous pouvez explorer des techniques de mise en forme avancées afin de créer des rapports PDF détaillés.

Options de mise en forme PDF

Puppeteer propose de nombreuses options pour personnaliser vos PDF. Consultez les sections ci-dessous pour apprendre à configurer les en-têtes, contrôler la mise en page et conserver une conception cohérente.

En-têtes et pieds de page

Vous pouvez inclure des en-têtes et des pieds de page en modifiant les options PDF avec des modèles HTML. Voici un exemple :

await page.pdf({
    displayHeaderFooter: true,
    headerTemplate: `<div style="font-size: 10px; padding: 10px; width: 100%; text-align: center;">
        <span class="title"></span> | Generated on <span class="date"></span>
    </div>`,
    footerTemplate: `<div style="font-size: 10px; padding: 10px; width: 100%; text-align: center;">
        Page <span class="pageNumber"></span> of <span class="totalPages"></span>
    </div>`,
    margin: { top: '1.25in', bottom: '1in' }
});

Voici les classes dynamiques que vous pouvez utiliser :

• date : ajoute l'horodatage actuel.
• title : affiche le titre du document.
• url : affiche l'URL de la page.
• pageNumber : insère le numéro de la page actuelle.
• totalPages : indique le nombre total de pages.

Sauts de page et contrôle de la mise en page

Pour gérer les sauts de page et garantir une bonne continuité du contenu, utilisez des règles CSS comme celles-ci :

.no-break {
    page-break-inside: avoid;
}

.force-break {
    page-break-after: always;
}

Vous pouvez également ajuster directement les paramètres du papier dans les options PDF :

Polices et éléments visuels

Affinez les polices et les éléments visuels pour les aligner sur votre image de marque :

• Polices web personnalisées :

@font-face {
    font-family: 'CustomFont';
    src: url('path/to/font.woff2') format('woff2');
}

• Activer les couleurs et images d'arrière-plan :

await page.pdf({ printBackground: true });

body {
    -webkit-print-color-adjust: exact;
    background-color: #f5f5f5;
}

• Configuration des polices pour les environnements Linux ou AWS Lambda :

export FONTCONFIG_FILE=/path/to/fonts.conf

Ces options vous permettent de créer des PDF soignés et professionnels.

Création de rapports PDF complexes

La création de rapports PDF avancés exige une attention particulière aux détails, notamment pour la visualisation des données, la conception de la mise en page et les performances. En enrichissant les techniques de mise en forme de base, vous pouvez produire des documents professionnels qui se démarquent.

Tableaux et graphiques de données

Enrichissez vos rapports avec des visuels dynamiques en combinant Puppeteer, D3.js et Handlebars. Voici un exemple de configuration pour intégrer des graphiques de données :

const template = Handlebars.compile(`
  <div class="report-container">
    {{> dataTable}}
    <div id="chart"></div>
  </div>
`);

// D3.js chart configuration
const chartConfig = {
  container: '#chart',
  data: salesData,
  width: 800,
  height: 400
};

Pour garantir un rendu soigné de votre PDF, configurez les paramètres de sortie comme suit :

await page.pdf({
  printBackground: true,
  format: 'Letter',
  margin: {
    top: '0.75in',
    right: '0.5in',
    bottom: '0.75in',
    left: '0.5in'
  }
});

« D3.js est une bibliothèque JavaScript permettant de manipuler des documents basés sur des données. D3 vous aide à donner vie aux données à l'aide de HTML, SVG et CSS. » [5]

Une fois vos visuels en place, organisez le rapport avec une table des matières et des numéros de page.

Table des matières et numéros de page

Suivez ces étapes pour ajouter une table des matières et garantir une numérotation exacte des pages :

1. Générer le PDF initial Créez la première version du PDF avec des en-têtes et des pieds de page :

   const mainPdf = await page.pdf({
     format: 'Letter',
     displayHeaderFooter: true
   });
   

2. Analyser et extraire les numéros de page Extrayez les numéros de page et générez la table des matières de manière dynamique :

   const pageMapping = await extractPageNumbers(mainPdf);
   const tocHtml = generateTocHtml(pageMapping);
   

3. Fusionner le document final Combinez la table des matières avec le document principal :

   const finalPdf = await mergePdfs([tocPdf, mainPdf]);
   

Pour les documents plus volumineux, vous devrez prendre des mesures supplémentaires pour maintenir les performances.

Gestion des rapports volumineux

La gestion efficace de rapports volumineux exige des optimisations spécifiques. Voici quelques techniques efficaces :

Par exemple, l'implémentation de Carriyo en avril 2024 a généré 10 000 PDF par jour avec une latence au 95e percentile de 365 ms sur AWS Lambda [7]. Voici comment appliquer la gestion des fichiers temporaires :

// Optimize file handling
const tempFile = await saveTempHtml(content);
await page.goto(`file://${tempFile}`, {
  waitUntil: 'networkidle0',
  timeout: 30000
});

« En utilisant des fichiers temporaires pour contourner les limitations de protocole, nous avons amélioré à la fois les performances et la fiabilité. » — Danindu de Silva [6]

Si vous rencontrez des problèmes lors de la navigation, veillez à consigner les erreurs et à recharger la page :

try {
  await page.goto(url, {
    waitUntil: 'networkidle0',
    timeout: 30000
  });
} catch (error) {
  console.error('Navigation failed:', error);
  await page.reload();
}

Ces méthodes garantissent que votre génération de rapports à grande échelle reste fiable et efficace.

Problèmes courants et solutions

La résolution des problèmes courants est essentielle pour garantir le bon fonctionnement et la fiabilité de vos workflows PDF automatisés. Les solutions suivantes s'appuient sur les principes de configuration présentés précédemment.

Compatibilité des navigateurs

Au troisième trimestre 2023, l'équipe de développement d'Acme Corp a résolu les erreurs « Failed to launch chrome » sur des serveurs Ubuntu en installant les dépendances nécessaires. Cela a réduit le taux d'erreur de 95 % et permis d'économiser 10 heures par semaine de débogage [8].

Pour les problèmes de lancement de Chrome sous Windows, utilisez la configuration suivante :

const browser = await puppeteer.launch({
    ignoreDefaultArgs: ['--disable-extensions'],
    args: ['--disable-features=HttpsFirstBalancedModeAutoEnable']
});

Guide de résolution des erreurs

Voici comment traiter efficacement les erreurs courantes :

Par exemple, pour gérer les délais de navigation, vous pouvez utiliser cette logique de nouvelle tentative :

const navigateWithRetry = async (page, url) => {
    try {
        await page.goto(url, {
            waitUntil: 'networkidle0',
            timeout: 30000
        });
    } catch (error) {
        console.error('Navigation error:', error);
        await page.reload();
    }
};

Une fois les erreurs résolues, vous pouvez vous concentrer sur l'amélioration de la vitesse pour optimiser l'efficacité des workflows.

Optimisation de la vitesse

Après la gestion des erreurs, l'étape suivante consiste à accélérer la génération de PDF. Par exemple, Carriyo génère 10 000 PDF par jour avec une latence p95 de 365 ms sur AWS Lambda [7].

Voici un extrait de code pour optimiser les performances en servant les ressources statiques localement :

await page.setRequestInterception(true);
page.on('request', request => {
    if (request.resourceType() === 'font' || request.resourceType() === 'image') {
        request.respond({
            body: localFileContent,
            headers: { 'Cache-Control': 'public, max-age=31536000' }
        });
    }
});

Pour les opérations à grande échelle, envisagez les stratégies suivantes :

• Gestion des ressources : conservez les instances de navigateur actives sur les plateformes serverless afin d'éviter les démarrages à froid qui augmentent la latence [7].
• Configuration système : sur un système à 4 cœurs, limitez la génération simultanée de PDF à trois processus pour une meilleure stabilité [7].
• Optimisation réseau : utilisez les API d'interception réseau de Puppeteer afin de servir les ressources statiques localement [7].

« En utilisant des fichiers temporaires pour contourner les limitations de protocole, nous avons amélioré à la fois les performances et la fiabilité. » — Danindu de Silva [6]

Utiliser Puppeteer avec Latenode

Latenode facilite l'utilisation de Puppeteer pour générer des PDF et propose une approche évolutive et économique pour automatiser les workflows documentaires.

Fonctionnement de Latenode

Latenode combine les capacités PDF de Puppeteer avec des outils tels qu'un éditeur visuel de workflows, la génération de code par IA et la logique conditionnelle. Il prend également en charge un large éventail de packages NPM. La plateforme utilise un système de crédits basé sur le temps, ce qui permet de gérer efficacement les coûts de l'automatisation PDF.

En s'appuyant sur les fonctionnalités principales de Puppeteer, Latenode simplifie les workflows PDF complexes grâce à une interface facile à utiliser et conçue pour évoluer.

Voici les fonctionnalités phares pour l'automatisation PDF :

• Automatisation intégrée avec navigateur headless
• Génération de code personnalisé assistée par IA
• Éditeur visuel de workflows pour configurer la logique PDF
• Prise en charge des branchements conditionnels dans les workflows

Configurer Puppeteer dans Latenode

Pour utiliser Puppeteer pour la génération de PDF sur Latenode, vous pouvez suivre cette configuration de base :

const puppeteer = require('puppeteer');

async function generatePDF(url) {
    const browser = await puppeteer.launch({ 
        headless: true,
        args: ['--disable-dev-shm-usage']
    });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle0' });
    const pdf = await page.pdf({ format: 'A4' });
    await browser.close();
    return pdf;
}

Pour sécuriser la génération de documents, stockez les informations sensibles, telles que les identifiants, dans des variables d'environnement :

await page.type('#email', process.env.PDF_USER);
await page.type('#password', process.env.PDF_PASSWORD);

Cette configuration garantit un workflow sécurisé et efficace pour générer des PDF.

Comparaison des plateformes d'automatisation

Lorsque vous choisissez une plateforme pour l'automatisation PDF, voici comment Latenode se compare aux outils traditionnels :

Pour les entreprises, le forfait Prime de Latenode (297 $/mois) prend en charge jusqu'à 1,5 million d'exécutions de workflow et conserve l'historique d'exécution pendant 60 jours. C'est donc un choix solide pour les entreprises ayant des besoins élevés de génération de PDF.

La plateforme simplifie également des tâches telles que la modification du style de page avant la création d'un PDF. Par exemple, vous pouvez masquer des éléments spécifiques avec cet extrait :

await page.addStyleTag({ 
    content: '.nav { display: none } .navbar { border: 0px } #print-button { display: none }' 
});

Cette flexibilité aide à rationaliser même les workflows PDF les plus complexes.

Conclusion

Récapitulatif des points principaux

Puppeteer est un outil puissant pour générer des PDF, que vous travailliez sur des documents simples ou des rapports complexes. Sa capacité à gérer les technologies web modernes et à offrir un contrôle précis sur la sortie PDF en fait un choix pertinent pour les cas d'utilisation à grande échelle.

Par exemple, Carriyo a utilisé avec succès Puppeteer en avril 2024 pour générer 10 000 PDF par jour destinés aux étiquettes d'expédition sur AWS Lambda. L'entreprise a atteint une latence p95 de 365 ms pour un coût de 7,68 $ sur 430 000 invocations [7].

Voici quelques fonctionnalités clés et leurs avantages concrets :

Conseils pour démarrer

Pour tirer le meilleur parti de Puppeteer, envisagez ces étapes pour un déploiement réussi :

• Optimisation des performances : utilisez le paramètre userDataDir pour mettre les ressources en cache et désactiver les fonctionnalités inutilisées afin d'accélérer la génération de PDF [4].
• Gestion des ressources : générez les PDF côté serveur afin de réduire la charge sur les appareils clients, en particulier pour les tâches à fort volume [1].
• Gestion des erreurs : mettez en œuvre des stratégies robustes de gestion des erreurs intégrant des délais et des mécanismes de nouvelle tentative afin de maintenir la stabilité des environnements de production [7].

Pour une expérience encore plus fluide, vous pouvez intégrer Puppeteer à des plateformes comme Latenode afin de simplifier les workflows tout en conservant des performances optimales.