.png)
.svg){kind=icon}
25. März 2025
•
7
min lesen
Konvertieren von HTML in PDF mit Puppeteer: Stilkonfiguration und Paginierung
Georgi Miloradowitsch
Forscher, Texter und Usecase-Interviewer
Die Konvertierung von HTML in PDF ist für die Erstellung standardisierter Dokumente wie Berichte, Rechnungen und Kundenmaterialien von entscheidender Bedeutung. Puppenspieler, ein Browser-Automatisierungstool, hilft Ihnen bei der Verwaltung von Stilen, Layouts und Seitenumbrüchen für eine professionelle PDF-Ausgabe. Hier ist ein kurzer Überblick über die Möglichkeiten von Puppenspieler:
Quick-Start: Installieren Sie Puppeteer mit npm install puppeteer, laden Sie Ihr HTML (als String, lokale Datei oder URL) und konfigurieren Sie PDF-Einstellungen wie Abmessungen, Ränder und Hintergrunddarstellung. Verwenden Sie @media print CSS-Regeln für eine bessere Kontrolle über Druckstile.
Hauptfunktionen:
@page Regeln.Mit Puppeteer können Sie die PDF-Generierung automatisieren und anpassen, um konsistente, qualitativ hochwertige Ergebnisse zu erzielen.
Erfahren Sie, wie Sie Puppeteer zum Erstellen von PDFs einrichten und verwenden. Folgen Sie diesen Schritten, um loszulegen.
Bevor Sie beginnen, stellen Sie sicher, dass Node.js Version 14.0.0 oder höher auf Ihrem System installiert ist. So richten Sie alles ein:
npm init -y.npm install puppeteer um Puppeteer zu Ihrem Projekt hinzuzufügen.Hier ist ein einfaches Skript zum Konvertieren von HTML in PDF mit 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();
Speichern Sie dieses Skript unter generate-pdf.js. Führen Sie es aus, indem Sie Folgendes eingeben: node generate-pdf.js in Ihrem Terminal. Das Skript erstellt eine PDF-Datei im US-Letter-Format (8.5 × 11 Zoll) mit 1-Zoll-Rändern.
Puppeteer bietet mehrere Möglichkeiten zum Laden von HTML-Inhalten für die PDF-Generierung:
await page.setContent(htmlString);
await page.goto(`file:${path.join(__dirname, 'template.html')}`);
await page.goto('https://yourwebsite.com/page-to-convert');
Achten Sie beim Arbeiten mit externen Ressourcen wie Bildern oder Stilen darauf, dass diese eingebettet sind, absolute URLs verwenden oder lokal gespeichert sind.
Um eine reibungslose PDF-Erstellung zu gewährleisten, beachten Sie die folgenden Hinweise:
page.waitForNetworkIdle() um zu warten, bis alle Netzwerkanforderungen abgeschlossen sind.Sobald Ihr HTML fertig ist, können Sie mit der Anpassung der Stile und Einstellungen des PDFs fortfahren.
Um Ihren Inhalt für die PDF-Ausgabe anzupassen, verwenden Sie @media print Regeln. Hier ist ein Beispiel:
@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;
}
}
Wenn Sie Ihre bildschirmbasierten Stile beibehalten möchten, anstatt druckspezifische Stile anzuwenden, fügen Sie vor dem Generieren der PDF-Datei diese Zeile ein:
await page.emulateMediaType('screen');
Sobald die Druckstile angewendet wurden, können Sie mit den Layoutanpassungen fortfahren.
Definieren Sie PDF-Abmessungen mithilfe von Puppeteer-Optionen oder CSS @page Regeln. Für Puppeteer können Sie die folgende Konfiguration verwenden:
await page.pdf({
format: 'Letter',
margin: {
top: '0.75in',
right: '0.5in',
bottom: '0.75in',
left: '0.5in'
},
landscape: false,
preferCSSPageSize: true
});
Für individuellere Seitengrößen verwenden Sie CSS @page Regeln:
@page {
size: 8.5in 11in;
margin: 0.75in 0.5in;
}
Nachdem Sie das Layout eingerichtet haben, können Sie die Designelemente für ein elegantes Erscheinungsbild optimieren.
Um den Inhalt optisch klar und professionell zu gestalten, verwenden Sie diese CSS-Regeln:
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;
}
Fügen Sie für einheitliche Hintergrundfarben, insbesondere in kritischen Abschnitten, diese Regel hinzu:
.color-critical {
-webkit-print-color-adjust: exact;
}
Diese Anpassungen stellen sicher, dass Ihr PDF leicht lesbar und optisch ansprechend ist.
Durch effektives Verwalten von Seitenumbrüchen wird ein reibungsloser Seitenfluss gewährleistet. Verwenden Sie diese CSS-Eigenschaften, um die Inhaltstrennung zu steuern:
/* 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;
}
Diese Regeln sorgen dafür, dass Ihr Dokument übersichtlich und leserlich bleibt. Nachdem Sie Seitenumbrüche eingerichtet haben, sollten Sie Kopf- und Fußzeilen entsprechend diesen Einstellungen konfigurieren.
Richten Sie Kopf- und Fußzeilen in Puppeteer ein, um Ihrem PDF ein professionelles Aussehen zu verleihen:
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'
}
});
Achten Sie darauf, die Ränder so anzupassen, dass Kopf- und Fußzeile richtig passen, ohne Ihren Inhalt zu überlappen.
Konzentrieren Sie sich bei eingerichteten Seitenumbrüchen und Kopf-/Fußzeilen auf die Verwaltung von Inhalten über mehrere Seiten hinweg. Eine gute Layoutkontrolle sorgt dafür, dass Ihr Dokument übersichtlich und professionell bleibt:
/* 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;
}
Umfassen Sie große Tabellen, die sich über mehrere Seiten erstrecken, in einem Container, der Umbrüche zulässt, ohne dass die Zeilen unterbrochen werden. So bleiben die Daten auch bei langen Datensätzen leicht verständlich.
TIPP: Aktivieren Sie die
printBackgroundOption in Puppeteer zum Rendern aller visuellen Elemente, einschließlich Hintergrundfarben und Bildern:
await page.pdf({
printBackground: true,
preferCSSPageSize: true
});
Um die Qualität und Leistung von PDF-Dateien zu verbessern, müssen Skalierung, Bildbearbeitung und Ressourcenverwaltung berücksichtigt werden. Diese Schritte gewährleisten ein ansprechendes Erscheinungsbild und eine effiziente Funktionalität des fertigen Dokuments.
Durch die korrekte Skalierung von Inhalten bleibt der Inhalt lesbar und das Design konsistent. Puppeteer bietet detaillierte Skalierungssteuerungen für die PDF-Darstellung:
await page.pdf({
scale: 0.8,
preferCSSPageSize: true,
format: 'Letter'
});
Werte unter 1 verkleinern den Inhalt, Werte über 1 vergrößern ihn. Die Skalierung mit preferCSSPageSize stellt sicher, dass das PDF den durch CSS definierten Abmessungen entspricht:
@page {
size: 8.5in 11in;
margin: 0.5in;
}
Die Wahl des richtigen Bildformats ist entscheidend. PNG eignet sich gut für detaillierte Grafiken wie Diagramme und Logos, kann aber die Dateigröße erhöhen. JPEG ist eine bessere Option für Fotos, während WebP wird oft konvertiert, wodurch die Dateigröße möglicherweise noch weiter ansteigt.
Um die Bildschärfe zu verbessern, erhöhen Sie den Skalierungsfaktor des Geräts:
await page.setViewport({
width: 1200,
height: 800,
deviceScaleFactor: 2
});
Durch die Bewältigung allgemeiner Herausforderungen wie Ressourcenverwaltung, Dateigröße und Fehler kann die Leistung erheblich gesteigert werden.
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;
}
};
Die Verwendung von Puppeteer zum Konvertieren von HTML in PDF bietet effektive Tools zum Erstellen professioneller Dokumente.
page.emulateMediaType('print').page-break-inside: avoid um sicherzustellen, dass Elemente wie Tabellenzeilen intakt bleiben.Diese Techniken bauen auf früheren Styling- und Layoutmethoden auf und dienen als solide Basis für eine fortgeschrittenere Automatisierung.
Mit diesen zusätzlichen Automatisierungsfunktionen können Sie die PDF-Erstellung weiter vorantreiben:
Wenn Sie diese Methoden in der Produktion einsetzen, schließen Sie Fehlerbehandlung und Protokollierung ein, um konsistente und zuverlässige PDF-Ausgaben zu gewährleisten.
