Umfassender Leitfaden zur PDF-Erstellung mit Puppeteer: Von einfachen Dokumenten bis zu komplexen Berichten

Puppeteer ist eine Node.js-Bibliothek zur Automatisierung von Chrome- oder Chromium-Browsern und damit ein leistungsstarkes Tool zum Erstellen von PDFs. Ganz gleich, ob Sie einfache Dokumente oder komplexe Berichte erstellen: Puppeteer bietet Funktionen wie native PDF-Unterstützung, individuelle Layouts und Automatisierungsintegrationen, um den Prozess zu optimieren.

Wichtige Funktionen von Puppeteer für die PDF-Erstellung:

• Einfache Einrichtung: Nutzen Sie den Puppeteer-basierten Headless Browser und erstellen Sie mit wenigen Codezeilen PDFs.
• Anpassbare Layouts: Passen Sie Seitengröße, Ausrichtung, Ränder und mehr an.
• Dynamische Inhalte: Rendern Sie JavaScript-intensive Seiten, wenden Sie individuelle Styles an und fügen Sie Kopf- und Fußzeilen sowie Seitenzahlen hinzu.
• Leistung: Schneller als Alternativen wie Selenium bei der PDF-Erstellung.
• Skalierbarkeit: Bewältigt die PDF-Erstellung im großen Maßstab, selbst für Tausende Dokumente täglich.

Warum es nützlich ist:

Puppeteer eignet sich ideal zur Automatisierung von Workflows, zum Erstellen von Berichten oder zum Exportieren von Webinhalten. Von Unternehmen, die gebrandete Dokumente erstellen, bis zu Entwicklern, die Datenvisualisierungen verarbeiten: Puppeteer vereinfacht den Prozess und sorgt für hochwertige Ergebnisse.

Wenn Sie direkt einsteigen möchten, führt Sie der Artikel durch Einrichtung, Anpassung und erweiterte Funktionen wie die Verarbeitung großer Berichte und die Behebung häufiger Probleme.

sbb-itb-23997f1

Nutzen Sie Headless Browser auf Latenode, um Dateien zu konvertieren, Web-Monitoring zu automatisieren und mehr!

Latenode bietet eine direkte Integration eines Puppeteer-basierten Headless Browsers, mit der Sie diese Bibliothek in Ihre Automatisierungs-Workflows integrieren können, um Daten von Websites zu extrahieren, Screenshots zu erstellen, Dateien zu konvertieren und sogar Dienste ohne API zu automatisieren.

Sie können Code beliebiger Komplexität hinzufügen, einschließlich Skripten zur Konvertierung von HTML in PDF. Sobald der Node konfiguriert ist, können Sie ihn mit vielen weiteren Integrationen verknüpfen, um Ihre Automatisierung zu erweitern: KI-Modelle wie ChatGPT, Datenbanken wie Airtable, CRM-Systeme wie Webflow und viele weitere Integrationen.

Starten Sie jetzt mit Headless Browser, um Ihre Arbeit zu beschleunigen, zu verbessern und zu vereinfachen!

Grundlegende PDF-Einrichtung mit Puppeteer

Um mit Puppeteer PDFs zu erstellen, müssen Sie es korrekt einrichten und die grundlegenden Konfigurationsoptionen verstehen. Hier finden Sie eine kurze Anleitung für den Einstieg.

Ihr erstes PDF erstellen

Um ein einfaches PDF aus einer Webseite zu erzeugen, erstellen Sie eine Datei namens app.js mit folgendem Code:

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();
})();

Dieses Skript beschreibt den wesentlichen Workflow: Browser starten, eine Seite öffnen, zu einer URL navigieren, das PDF erzeugen und den Browser schließen.

Seiteneinstellungen und Layout

Mit Puppeteer können Sie verschiedene Einstellungen für die PDF-Erstellung anpassen. Nachfolgend finden Sie einige wichtige Optionen:

Wenn Sie PDFs aus Webseiten erstellen, nutzen Sie die Option waitUntil: 'networkidle0'. Dadurch wird sichergestellt, dass sämtliche Netzwerkaktivitäten abgeschlossen sind, bevor das PDF erzeugt wird [3].

Für individuelle HTML-Inhalte können Sie PDFs mithilfe lokaler Dateien erstellen. Das ist besonders hilfreich für vorlagenbasierte Dokumente oder die Stapelverarbeitung. Aktualisieren Sie die Funktion page.goto() wie folgt:

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

Da Puppeteer auf der Rendering-Engine von Chrome basiert, werden alle von Chrome unterstützten CSS-Styles und Formatierungen in Ihren PDFs präzise dargestellt. Für komplexere Anforderungen können Sie fortgeschrittene Formatierungstechniken einsetzen, um detaillierte PDF-Berichte zu erstellen.

Optionen zur PDF-Formatierung

Puppeteer bietet zahlreiche Optionen zur individuellen Gestaltung Ihrer PDFs. In den folgenden Abschnitten erfahren Sie, wie Sie Kopf- und Fußzeilen einrichten, das Seitenlayout steuern und ein konsistentes Design gewährleisten.

Kopf- und Fußzeilen

Sie können Kopf- und Fußzeilen mithilfe von HTML-Vorlagen in den PDF-Optionen hinzufügen. Hier ist ein Beispiel:

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' }
});

Folgende dynamische Klassen stehen Ihnen zur Verfügung:

• date: Fügt den aktuellen Zeitstempel hinzu.
• title: Zeigt den Dokumenttitel an.
• url: Zeigt die Seiten-URL an.
• pageNumber: Fügt die aktuelle Seitenzahl ein.
• totalPages: Gibt die Gesamtzahl der Seiten an.

Seitenumbrüche und Layout-Steuerung

Um Seitenumbrüche zu verwalten und einen reibungslosen Inhaltsfluss sicherzustellen, verwenden Sie CSS-Regeln wie diese:

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

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

Sie können die Papiereinstellungen auch direkt in den PDF-Optionen anpassen:

Schriftarten und visuelle Elemente

Passen Sie Schriftarten und visuelle Elemente präzise an Ihr Branding an:

• Individuelle Webschriftarten:

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

• Hintergrundfarben und Bilder aktivieren:

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

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

• Schriftartkonfiguration für Linux- oder AWS Lambda -Umgebungen:

export FONTCONFIG_FILE=/path/to/fonts.conf

Mit diesen Optionen können Sie professionell gestaltete, hochwertige PDFs erstellen.

Komplexe PDF-Berichte erstellen

Die Erstellung fortgeschrittener PDF-Berichte erfordert besondere Sorgfalt, vor allem bei Datenvisualisierung, Layout-Design und Leistung. Indem Sie grundlegende Formatierungstechniken erweitern, können Sie professionelle Dokumente erstellen, die überzeugen.

Tabellen und Datencharts

Erweitern Sie Ihre Berichte um dynamische Visualisierungen, indem Sie Puppeteer, D3.js und Handlebars kombinieren. Hier ist eine Beispielkonfiguration für die Integration von Datencharts:

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
};

Damit Ihr PDF professionell aussieht, konfigurieren Sie die Ausgabeeinstellungen wie folgt:

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

„D3.js ist eine JavaScript-Bibliothek zur Bearbeitung datenbasierter Dokumente. D3 hilft Ihnen dabei, Daten mithilfe von HTML, SVG und CSS zum Leben zu erwecken.“ [5]

Sobald Ihre Visualisierungen eingerichtet sind, strukturieren Sie den Bericht mit Inhaltsverzeichnis und Seitenzahlen.

Inhaltsverzeichnis und Seitenzahlen

Folgen Sie diesen Schritten, um ein Inhaltsverzeichnis hinzuzufügen und eine präzise Seitennummerierung sicherzustellen:

1. Erstes PDF erzeugen Erstellen Sie die erste Version des PDFs mit Kopf- und Fußzeilen:

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

2. Seitenzahlen analysieren und extrahieren Extrahieren Sie Seitenzahlen und erstellen Sie das Inhaltsverzeichnis dynamisch:

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

3. Finales Dokument zusammenführen Kombinieren Sie das Inhaltsverzeichnis mit dem Hauptdokument:

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

Bei größeren Dokumenten müssen Sie zusätzliche Maßnahmen ergreifen, um die Leistung aufrechtzuerhalten.

Verarbeitung großer Berichte

Für die effiziente Verarbeitung umfangreicher Berichte sind spezifische Optimierungen erforderlich. Hier sind einige wirksame Techniken:

So erzeugte beispielsweise die Implementierung von Carriyo im April 2024 täglich 10.000 PDFs mit einer Latenz im 95. Perzentil von 365 ms auf AWS Lambda [7]. So kann die Verarbeitung temporärer Dateien umgesetzt werden:

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

„Durch die Verwendung temporärer Dateien zur Umgehung von Protokollbeschränkungen haben wir sowohl die Leistung als auch die Zuverlässigkeit verbessert.“ – Danindu de Silva [6]

Wenn während der Navigation Probleme auftreten, protokollieren Sie die Fehler und laden Sie die Seite neu:

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

Diese Methoden sorgen dafür, dass die Erstellung großer Mengen an Berichten zuverlässig und effizient bleibt.

Häufige Probleme und Lösungen

Die Behebung häufiger Probleme ist entscheidend, damit Ihre automatisierten PDF-Workflows reibungslos und zuverlässig funktionieren. Die folgenden Lösungen bauen auf den zuvor erläuterten Konfigurationsgrundlagen auf.

Browser-Kompatibilität

Im dritten Quartal 2023 löste das Entwicklungsteam von Acme Corp Fehler vom Typ „Failed to launch chrome“ auf Ubuntu-Servern durch die Installation der erforderlichen Abhängigkeiten. Dadurch sanken die Fehlerraten um 95 % und es wurden pro Woche 10 Stunden Debugging-Aufwand eingespart [8].

Bei Problemen mit dem Chrome-Start unter Windows verwenden Sie folgende Konfiguration:

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

Leitfaden zur Fehlerbehebung

So beheben Sie häufige Fehler effizient:

Um beispielsweise Navigations-Timeouts zu behandeln, können Sie diese Wiederholungslogik verwenden:

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

Sobald Fehler behoben sind, können Sie sich auf die Verbesserung der Geschwindigkeit konzentrieren, um die Workflow-Effizienz weiter zu steigern.

Geschwindigkeitsoptimierung

Nach der Fehlerbehebung besteht der nächste Schritt darin, die Geschwindigkeit der PDF-Erstellung zu erhöhen. Carriyo erstellt beispielsweise täglich 10.000 PDFs mit einer p95-Latenz von 365 ms auf AWS Lambda [7].

Hier ist ein Codeausschnitt zur Leistungsoptimierung durch die lokale Bereitstellung statischer Assets:

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' }
        });
    }
});

Für groß angelegte Prozesse sollten Sie diese Strategien berücksichtigen:

• Ressourcenmanagement: Halten Sie Browser-Instanzen auf serverlosen Plattformen aktiv, um Kaltstarts zu vermeiden, die die Latenz erhöhen [7].
• Systemkonfiguration: Begrenzen Sie auf einem System mit vier Kernen die gleichzeitige PDF-Erstellung auf drei Prozesse, um eine höhere Stabilität zu erzielen [7].
• Netzwerkoptimierung: Nutzen Sie die APIs zur Netzwerkinterzeption von Puppeteer, um statische Assets lokal bereitzustellen [7].

„Durch die Verwendung temporärer Dateien zur Umgehung von Protokollbeschränkungen haben wir sowohl die Leistung als auch die Zuverlässigkeit verbessert.“ – Danindu de Silva [6]

Puppeteer mit Latenode verwenden

Latenode erleichtert die Nutzung von Puppeteer zur PDF-Erstellung und bietet eine skalierbare sowie kosteneffiziente Möglichkeit, Dokumenten-Workflows zu automatisieren.

So funktioniert Latenode

Latenode kombiniert die PDF-Funktionen von Puppeteer mit Tools wie einem visuellen Workflow-Builder, KI-gestützter Codegenerierung und bedingter Logik. Zudem unterstützt es eine breite Palette an NPM-Paketen. Die Plattform nutzt ein zeitbasiertes Credit-System, das die effiziente Kostenverwaltung für die PDF-Automatisierung unterstützt.

Aufbauend auf der Kernfunktionalität von Puppeteer vereinfacht Latenode komplexe PDF-Workflows mit einer benutzerfreundlichen, auf Skalierbarkeit ausgelegten Oberfläche.

Hier sind die wichtigsten Funktionen für die PDF-Automatisierung:

• Integrierte Headless-Browser-Automatisierung
• KI-gestützte Erstellung individuellen Codes
• Ein visueller Workflow-Builder zum Einrichten der PDF-Logik
• Unterstützung für bedingte Verzweigungen in Workflows

Puppeteer in Latenode einrichten

Um Puppeteer für die PDF-Erstellung auf Latenode zu nutzen, können Sie diese grundlegende Einrichtung verwenden:

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;
}

Um die Dokumentenerstellung sicher zu halten, speichern Sie sensible Informationen wie Zugangsdaten in Umgebungsvariablen:

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

Diese Einrichtung gewährleistet einen sicheren und effizienten Workflow für die PDF-Erstellung.

Automatisierungsplattformen vergleichen

Wenn Sie eine Plattform für die PDF-Automatisierung auswählen, zeigt dieser Vergleich, wie Latenode gegenüber klassischen Tools abschneidet:

Für den Unternehmenseinsatz unterstützt Latenodes Prime-Plan (297 $/Monat) bis zu 1,5 Millionen Workflow-Ausführungen und bewahrt den Ausführungsverlauf 60 Tage lang auf. Das macht ihn zu einer starken Wahl für Unternehmen mit hohem PDF-Erstellungsvolumen.

Die Plattform vereinfacht auch Aufgaben wie die Anpassung von Seiten-Styles vor der PDF-Erstellung. Sie können beispielsweise bestimmte Elemente mit diesem Codeausschnitt ausblenden:

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

Diese Flexibilität hilft dabei, selbst die komplexesten PDF-Workflows zu optimieren.

Fazit

Überblick über die wichtigsten Punkte

Puppeteer ist ein leistungsstarkes Tool zur PDF-Erstellung – sowohl für einfache Dokumente als auch für komplexe Berichte. Die Fähigkeit, moderne Webtechnologien zu verarbeiten und die PDF-Ausgabe präzise zu steuern, macht es zu einer starken Wahl für Anwendungsfälle im großen Maßstab.

So nutzte Carriyo Puppeteer im April 2024 erfolgreich, um auf AWS Lambda täglich 10.000 PDFs für Versandetiketten zu erstellen. Dabei erreichte das Unternehmen eine p95-Latenz von 365 ms bei Kosten von 7,68 $ für 430.000 Aufrufe [7].

Hier sind einige zentrale Funktionen und ihre praktischen Vorteile:

Tipps für den Einstieg

Um Puppeteer optimal zu nutzen, sollten Sie für eine erfolgreiche Bereitstellung diese Schritte berücksichtigen:

• Leistungsoptimierung: Verwenden Sie die Einstellung userDataDir, um Ressourcen zwischenzuspeichern, und deaktivieren Sie ungenutzte Funktionen, um die PDF-Erstellung zu beschleunigen [4].
• Ressourcenmanagement: Erstellen Sie PDFs serverseitig, um die Last auf Client-Geräten zu reduzieren – insbesondere bei Aufgaben mit hohem Volumen [1].
• Fehlerbehandlung: Implementieren Sie robuste Strategien zur Fehlerbehandlung mit Timeouts und Wiederholungsmechanismen, damit Produktionsumgebungen stabil bleiben [7].

Für einen noch reibungsloseren Ablauf können Sie Puppeteer mit Plattformen wie Latenode integrieren, um Workflows zu vereinfachen und gleichzeitig eine hohe Leistung beizubehalten.