.png)
.svg){kind=icon}
14 mars 2025
•
10
min lire
Guide complet de génération de PDF avec Puppeteer : des documents simples aux rapports complexes
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
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.
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.
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.
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.
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.
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.
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.
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 :
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' } |
Ajustez les polices et les visuels pour les aligner sur votre image de marque :
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2');
}
await page.pdf({ printBackground: true });
body {
-webkit-print-color-adjust: exact;
background-color: #f5f5f5;
}
export FONTCONFIG_FILE=/path/to/fonts.conf
Ces options vous permettent de créer des PDF soignés et professionnels.
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.
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.
Suivez ces étapes pour ajouter un table des matières et assurer une numérotation précise des pages :
const mainPdf = await page.pdf({
format: 'Letter',
displayHeaderFooter: true
});
const pageMapping = await extractPageNumbers(mainPdf);
const tocHtml = generateTocHtml(pageMapping);
const finalPdf = await mergePdfs([tocPdf, mainPdf]);
Pour les documents plus volumineux, vous devrez prendre des mesures supplémentaires pour maintenir les performances.
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 de 365 ms au XNUMXe percentile 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.
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.
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']
});
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.
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 :
« En utilisant des fichiers temporaires pour contourner les limitations du protocole, nous avons amélioré les performances et la fiabilité. » - Danindu de Silva
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.
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 :
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.
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.
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 Puppeteer a été utilisé avec succès en avril 2024 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 |
Pour tirer le meilleur parti de Puppeteer, tenez compte de ces étapes pour un déploiement réussi :
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.
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.
