.png)
.svg){kind=icon}
25 mars 2025
•
7
min lire
Conversion de HTML en PDF avec Puppeteer : configuration du style et pagination
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
La conversion de HTML en PDF est essentielle pour créer des documents standardisés tels que des rapports, des factures et des documents clients. Marionnettiste, un outil d'automatisation de navigateur, vous aide à gérer les styles, les mises en page et les sauts de page pour des résultats PDF professionnels. Voici un aperçu rapide de ses possibilités. Marionnettiste:
Quick Start:Installer Puppeteer avec npm install puppeteer, chargez votre code HTML (sous forme de chaîne, de fichier local ou d'URL) et configurez les paramètres PDF tels que les dimensions, les marges et le rendu en arrière-plan. @media print Règles CSS pour un meilleur contrôle des styles d'impression.
Fonctionnalités clés:
@page règles.Avec Puppeteer, vous pouvez automatiser et personnaliser la génération de PDF pour des résultats cohérents et de haute qualité.
Apprenez à configurer et à utiliser Puppeteer pour générer des PDF. Suivez ces étapes pour commencer.
Avant de commencer, assurez-vous que Node.js version 14.0.0 ou supérieure est installé sur votre système. Voici comment configurer tout cela :
npm init -y.npm install puppeteer pour ajouter Puppeteer à votre projet.Voici un script de base pour convertir du HTML en PDF à l'aide de Puppeteer :
const puppeteer = require('puppeteer');
async function generatePDF() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Set page content
await page.setContent(`
<html>
<body>
<h1>Sample PDF Document</h1>
<p>Generated with Puppeteer</p>
</body>
</html>
`);
// Generate PDF
await page.pdf({
path: 'output.pdf',
format: 'Letter',
margin: {
top: '1in',
right: '1in',
bottom: '1in',
left: '1in'
}
});
await browser.close();
}
generatePDF();
Enregistrer ce script sous generate-pdf.js. Exécutez-le en tapant node generate-pdf.js dans votre terminal. Le script créera un PDF aux dimensions US Letter (8.5 × 11 pouces) avec des marges de 1 pouce.
Puppeteer propose plusieurs façons de charger du contenu HTML pour la génération de PDF :
await page.setContent(htmlString);
await page.goto(`file:${path.join(__dirname, 'template.html')}`);
await page.goto('https://yourwebsite.com/page-to-convert');
Lorsque vous travaillez avec des ressources externes telles que des images ou des styles, assurez-vous qu'elles sont intégrées, qu'elles utilisent des URL absolues ou qu'elles sont stockées localement.
Pour garantir une génération fluide de PDF, gardez ces conseils à l'esprit :
page.waitForNetworkIdle() attendre que toutes les requêtes réseau soient terminées.Une fois votre HTML prêt, vous pouvez passer à la personnalisation des styles et des paramètres du PDF.
Pour adapter votre contenu à la sortie PDF, utilisez @media print règles. Voici un exemple :
@media print {
/* Hide navigation menus and non-essential elements */
nav, button, .no-print {
display: none;
}
/* Adjust text for better readability in PDFs */
body {
font-size: 12pt;
line-height: 1.5;
}
/* Ensure accurate background rendering */
* {
-webkit-print-color-adjust: exact;
}
}
Si vous souhaitez conserver vos styles basés sur l'écran au lieu d'appliquer des styles spécifiques à l'impression, incluez cette ligne avant de générer le PDF :
await page.emulateMediaType('screen');
Une fois les styles d’impression appliqués, vous pouvez passer aux ajustements de mise en page.
Définir les dimensions du PDF à l'aide des options Puppeteer ou CSS @page Règles. Pour Puppeteer, vous pouvez utiliser la configuration suivante :
await page.pdf({
format: 'Letter',
margin: {
top: '0.75in',
right: '0.5in',
bottom: '0.75in',
left: '0.5in'
},
landscape: false,
preferCSSPageSize: true
});
Pour des tailles de page plus personnalisées, utilisez CSS @page règles:
@page {
size: 8.5in 11in;
margin: 0.75in 0.5in;
}
Après avoir configuré la mise en page, vous pouvez affiner les éléments de conception pour un look soigné.
Pour rendre le contenu visuellement clair et professionnel, utilisez ces règles CSS :
body {
font-family: 'Arial', sans-serif;
color: #333333;
}
h1, h2, h3 {
page-break-after: avoid;
color: #000000;
}
table {
width: 100%;
border-collapse: collapse;
page-break-inside: avoid;
}
img {
max-width: 100%;
height: auto;
page-break-inside: avoid;
}
Pour des couleurs d'arrière-plan cohérentes, en particulier dans les sections critiques, ajoutez cette règle :
.color-critical {
-webkit-print-color-adjust: exact;
}
Ces ajustements garantissent que votre PDF est facile à lire et visuellement attrayant.
Gérer efficacement les sauts de page garantit une fluidité de votre contenu sur plusieurs pages. Utilisez ces propriétés CSS pour contrôler les divisions de contenu :
/* Start new page before chapters */
.chapter {
page-break-before: always;
}
/* Keep headings together with their content */
h2, h3 {
page-break-after: avoid;
}
/* Avoid splitting tables or figures */
table, figure {
page-break-inside: avoid;
}
Ces règles vous aident à organiser votre document et à le rendre facile à lire. Une fois les sauts de page définis, concentrez-vous sur la configuration des en-têtes et des pieds de page pour qu'ils soient alignés avec ces paramètres.
Configurez des en-têtes et des pieds de page dans Puppeteer pour donner à votre PDF un aspect professionnel :
await page.pdf({
displayHeaderFooter: true,
headerTemplate: `
<div style="font-size: 10px; padding: 0 0.5in; width: 100%;">
<span class="title"></span>
<span class="date" style="float: right;"></span>
</div>
`,
footerTemplate: `
<div style="font-size: 10px; text-align: center; width: 100%;">
Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>
`,
margin: {
top: '1in',
bottom: '1in'
}
});
Assurez-vous d'ajuster les marges afin que l'en-tête et le pied de page s'adaptent correctement sans chevaucher votre contenu.
Une fois les sauts de page et les en-têtes/pieds de page en place, concentrez-vous sur la gestion du contenu sur plusieurs pages. Une mise en page soignée garantit la clarté et le professionnalisme de votre document :
/* Keep captions with their images */
figure {
display: table;
page-break-inside: avoid;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
/* Avoid splitting list items or table rows */
li, .table-row {
page-break-inside: avoid;
}
/* Allow large tables to break across pages */
.table-wrapper {
page-break-inside: auto;
}
Pour les tableaux volumineux s'étendant sur plusieurs pages, placez-les dans un conteneur autorisant les sauts de page tout en conservant les lignes intactes. Cela garantit une lecture aisée des données, même dans les ensembles de données volumineux.
Conseil: Activez la
printBackgroundoption dans Puppeteer pour rendre tous les éléments visuels, y compris les couleurs d'arrière-plan et les images :
await page.pdf({
printBackground: true,
preferCSSPageSize: true
});
Améliorer la qualité et les performances d'un PDF nécessite de prêter attention à la mise à l'échelle, au traitement des images et à la gestion des ressources. Ces étapes garantissent un document final impeccable et performant.
Une mise à l'échelle correcte du contenu garantit sa lisibilité et sa cohérence. Puppeteer propose des contrôles de mise à l'échelle détaillés pour le rendu des PDF :
await page.pdf({
scale: 0.8,
preferCSSPageSize: true,
format: 'Letter'
});
Ici, les valeurs inférieures à 1 réduisent le contenu, tandis que les valeurs supérieures à 1 l'agrandissent. Associer la mise à l'échelle à preferCSSPageSize garantit que le PDF adhère aux dimensions définies par CSS :
@page {
size: 8.5in 11in;
margin: 0.5in;
}
Choisir le bon format d'image est crucial. Le format PNG est idéal pour les visuels détaillés comme les graphiques et les logos, mais peut augmenter la taille du fichier. Le format JPEG est plus adapté aux photos, tandis que WebP est souvent converti, ce qui peut augmenter encore la taille du fichier.
Pour améliorer la clarté de l'image, augmentez le facteur d'échelle de l'appareil :
await page.setViewport({
width: 1200,
height: 800,
deviceScaleFactor: 2
});
Relever des défis courants tels que la gestion des ressources, la taille des fichiers et les erreurs peut considérablement améliorer les performances.
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
for (const request of requests) {
await generatePDF(page, request);
}
await page.evaluate(() => {
document.querySelectorAll('.no-print').forEach(el => el.remove());
document.querySelectorAll('img').forEach(img => {
img.loading = 'lazy';
img.decoding = 'async';
});
});
const generatePDF = async (page, options) => {
try {
await page.goto(options.url, {
waitUntil: 'networkidle0',
timeout: 30000
});
return await page.pdf(options);
} catch (error) {
console.error('PDF generation failed:', error);
throw error;
}
};
L'utilisation de Puppeteer pour convertir du HTML en PDF fournit des outils efficaces pour créer des documents de qualité professionnelle.
page.emulateMediaType('print').page-break-inside: avoid pour garantir que les éléments tels que les lignes du tableau restent intacts.Ces techniques s’appuient sur des méthodes de style et de mise en page antérieures, servant de base solide pour une automatisation plus avancée.
Vous pouvez aller plus loin dans la génération de PDF grâce à ces fonctionnalités d'automatisation supplémentaires :
Lors du déploiement de ces méthodes en production, incluez la gestion des erreurs et la journalisation pour maintenir des sorties PDF cohérentes et fiables.
