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

Table des matières

Guide complet de 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 la création de PDF. Que vous créiez des documents simples ou des rapports complexes, Puppeteer offre des fonctionnalités telles que prise en charge PDF native, agencements personnalisés et intégration d'automatisation pour rationaliser le processus.

Principales fonctionnalités de Puppeteer pour la génération de PDF :

Marionnettiste

Configuration facile: Utilisation Navigateur sans tête basé sur Puppeteer et commencez à générer des PDF avec quelques lignes de code.
Mises en page personnalisables: Ajustez la taille de la page, l'orientation, les marges, etc.
Contenu dynamique: Affichez des pages riches en JavaScript, appliquez des styles personnalisés et incluez des en-têtes, des pieds de page et des numéros de page.
Performances:Plus rapide que les 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 c'est utile:

Puppeteer est idéal pour automatiser les flux de travail, générer des rapports ou exporter du contenu web. Des entreprises créant des documents de marque aux développeurs gérant des visualisations de données, Puppeteer simplifie le processus et garantit des résultats de haute qualité.

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

Commencez à utiliser Headless Browser sur Latenode pour convertir des fichiers, automatiser la surveillance Web et bien plus encore !

Latenode dispose d'une intégration directe avec un navigateur sans tête basé sur Puppeteer, qui vous permet d'intégrer cette bibliothèque dans vos scénarios 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 n'ont pas d'API.

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

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

Configuration PDF de base avec Puppeteer

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

Créer votre premier PDF

Pour générer un PDF de base à partir d'une page Web, créez un app.js fichier 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 décrit le flux de travail essentiel : lancement d'un navigateur, ouverture d'une page, navigation vers une URL, génération du PDF et fermeture du navigateur.

Paramètres de la page et mise en page

Puppeteer vous permet de modifier divers paramètres pour la création de PDF. Voici quelques options clés que vous pouvez modifier :

Paramètres	Description	Exemple de valeur
Format	Taille de papier	« Lettre », « A4 », « Légal »
Largeur	Largeur de page personnalisée	« 8.5 pouces », « 215.9 mm »
Taille	Hauteur de page personnalisée	« 11 pouces », « 279.4 mm »
Paysage	Orientation de la page	vrai faux
Marge	Marges de page	{ haut : '1in', droite : '1in', bas : '1in', gauche : '1in' }

Lors de la génération de fichiers PDF à partir de pages Web, utilisez le waitUntil: 'networkidle0' option. Cela garantit que toute l'activité réseau est terminée avant la génération du PDF. .

Pour le contenu HTML personnalisé, vous pouvez créer des PDF à partir de fichiers locaux. Ceci est particulièrement utile pour les documents basés sur des modèles ou le traitement par lots. page.goto() fonctionne comme ceci:

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 s'afficheront correctement dans vos PDF. Pour des besoins plus complexes, vous pouvez explorer des techniques de formatage avancées pour créer des rapports PDF détaillés.

Options de formatage PDF

Puppeteer offre de nombreuses options pour personnaliser vos PDF. Consultez les sections ci-dessous pour apprendre à configurer les en-têtes, à gérer la mise en page et à garantir la cohérence de votre design.

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 :

données: Ajoute l'horodatage actuel.
titre: Affiche le titre du document.
url: Affiche l'URL de la page.
numéro de page: Insère le numéro de page actuel.
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 la fluidité 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 les paramètres du papier directement dans les options PDF :

Paramètres	Options	Exemple
Format	Lettre, A4, Légal	format : « Lettre »
Dimensions	Largeur/hauteur personnalisée	largeur : '8.5 pouces', hauteur : '11 pouces'
Orientation	Portrait paysage	paysage : vrai
Les marges	Espacement personnalisé	marge : { haut : '1in', bas : '1in' }

Polices et éléments visuels

Ajustez les polices et les 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 les images d'arrière-plan:

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

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

Configuration des polices pour Linux ou AWS Lambda et rapides.:

export FONTCONFIG_FILE=/path/to/fonts.conf

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

Rapports PDF sur les complexes immobiliers

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

Tableaux et graphiques de données

Boostez vos rapports avec des visuels dynamiques en combinant Marionnettiste, D3.js et CintresVoici un exemple de configuration pour l'intégration de 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 que votre PDF soit impeccable, 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 à partir de données. D3 vous aide à donner vie à vos données grâce aux langages HTML, SVG et CSS.

Une fois vos visuels en place, organisez le rapport avec le contenu et les numéros de page.

Contenu et numéros de page

Suivez ces étapes pour ajouter un table des matières et assurer une numérotation précise des pages :

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
});
```
Analyser et extraire les numéros de page Extraire les numéros de page et générer la table des matières de manière dynamique :
```
const pageMapping = await extractPageNumbers(mainPdf);
const tocHtml = generateTocHtml(pageMapping);
```
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 nécessite des optimisations spécifiques. Voici quelques techniques efficaces :

Technique	Bénéfice
Utilisation des fichiers temporaires	Réduit l'utilisation de la mémoire de 20 %
Limitation du nombre de cœurs du processeur	Accélère le traitement en équilibrant les tâches

Par exemple, Carriyo's la mise en œuvre en avril 2024 a généré 10,000 95 PDF par jour avec une latence au 365e percentile de XNUMX ms sur AWS Lambda Voici comment la gestion des fichiers temporaires peut être appliquée :

// 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 du protocole, nous avons amélioré les performances et la fiabilité. » - Danindu de Silva

Si vous rencontrez des problèmes lors de la navigation, assurez-vous de consigner les erreurs et de 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 la génération de vos 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 flux de travail PDF automatisés. Les solutions suivantes s'appuient sur les bases de configuration évoquées précédemment.

Compatibilité du navigateur

Au troisième trimestre 3, l'équipe de développement d'Acme Corp a résolu les erreurs « Échec du lancement de Chrome » sur les serveurs Ubuntu en installant les dépendances nécessaires. Cela a permis de réduire les taux d'erreur de 2023 % et de gagner 95 heures de débogage par semaine. .

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 :

Type d'erreur	Solution	Impact positif
Module introuvable	Mettre à jour Node.js vers la version 14+	Corrige les conflits de dépendances
Délai d'expiration de la navigation	Définir des valeurs de délai d'expiration personnalisées	Empêche les échecs prématurés des scripts
Problèmes de bac à sable	Ajuster les autorisations	Assure une exécution sécurisée

Par exemple, pour gérer les délais d'expiration 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 une meilleure efficacité du flux de travail.

Optimisation de vitesse

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

Voici un extrait de code pour optimiser les performances en diffusant des 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 ces stratégies :

Gestion des ressources: Gardez les instances de navigateur au chaud sur les plates-formes sans serveur pour éviter les démarrages à froid qui augmentent la latence .
Configuration du système:Sur un système à 4 cœurs, limitez la génération simultanée de PDF à trois processus pour une meilleure stabilité .
Optimisation du réseau:Utilisez les API d'interception réseau de Puppeteer pour servir des ressources statiques localement .

« En utilisant des fichiers temporaires pour contourner les limitations du protocole, nous avons amélioré les performances et la fiabilité. » - Danindu de Silva

Utiliser Puppeteer avec Laténode

Laténode

Latenode facilite l'utilisation de Puppeteer pour la génération de PDF, offrant un moyen évolutif et rentable d'automatiser les flux de travail des documents.

Comment fonctionne Latenode

Latenode associe les fonctionnalités PDF de Puppeteer à des outils tels qu'un générateur de workflows visuel, la génération de code basée sur l'IA et la logique conditionnelle. La plateforme prend également en charge une large gamme de packages NPM. La plateforme utilise un système de crédits basés sur le temps, ce qui permet de gérer efficacement les coûts d'automatisation des PDF.

S'appuyant sur les fonctionnalités principales de Puppeteer, Latenode simplifie les flux de travail PDF complexes avec une interface facile à utiliser conçue pour l'évolutivité.

Voici les fonctionnalités remarquables de l’automatisation PDF :

Automatisation intégrée du navigateur sans tête
Génération de code personnalisé assistée par l'IA
Un générateur de flux de travail visuel pour configurer la logique PDF
Prise en charge des branches conditionnelles dans les workflows

Configuration de 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 informations d'identification 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 flux de travail sécurisé et efficace pour la génération de PDF.

Comparaison des plateformes d'automatisation

Lors du choix d'une plateforme pour l'automatisation PDF, voici comment Latenode se compare aux outils traditionnels :

Fonctionnalité	Laténode	Outils d'automatisation traditionnels
Modèle de prix	Crédits basés sur le temps à partir de 5 $/mois	Licences par document ou par utilisateur
Limites du flux de travail	20–illimité	Souvent limité par des exécutions simultanées
Prise en charge des packages NPM	Plus d'un million de colis	Généralement limité aux modules spécifiques à la plate-forme
Historique d'exécution	Conservation pendant 1 à 60 jours	Souvent limité à la journalisation de base

Pour une utilisation en entreprise, l'offre Prime de Latenode (297 $/mois) prend en charge jusqu'à 1.5 million d'exécutions de scénarios et conserve l'historique d'exécution pendant 60 jours. C'est donc un choix judicieux pour les entreprises ayant des besoins importants en matière 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é permet de rationaliser même les flux de travail PDF les plus complexes.

Conclusion

Examen des points principaux

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

Par exemple, Carriyo En avril 2024, Puppeteer a été utilisé avec succès pour générer 10,000 95 PDF par jour pour les étiquettes d'expédition sur AWS Lambda. L'entreprise a atteint une latence p365 de 7.68 ms pour un coût de 430,000 $ pour XNUMX XNUMX appels. .

Voici quelques fonctionnalités remarquables et leurs avantages pratiques :

Fonctionnalité	Bénéfice	Impact réel
Navigateur sans tête	Permet le rendu côté serveur avec des fonctionnalités Web modernes	Gère le contenu dynamique, JavaScript et CSS avec précision
Optimisation des ressources	Met en cache les ressources et désactive les fonctionnalités inutilisées pour améliorer les performances	Améliore l'efficacité lors de la génération de PDF
Gestion des erreurs	Inclut des mécanismes de nouvelle tentative et des contrôles de délai d'expiration	Assure la fiabilité dans les environnements de production
Évolutivité	Prend en charge la génération de PDF à haut volume	Performances éprouvées sous de lourdes charges de travail

Conseils de mise en route

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

Optimisation des performances: Utilisez le userDataDir paramètre permettant de mettre en cache les ressources et de désactiver les fonctionnalités inutilisées pour accélérer la génération de PDF .
Gestion des ressources: Générez des PDF côté serveur pour réduire la charge sur les appareils clients, en particulier pour les tâches à volume élevé .
Gestion des erreurs : Mettre en œuvre des stratégies robustes de gestion des erreurs avec des mécanismes de temporisation et de nouvelle tentative pour maintenir la stabilité des environnements de production .

Pour une expérience encore plus fluide, vous pouvez intégrer Puppeteer à des plateformes comme Latenode pour simplifier les flux de travail tout en maintenant des performances optimales.