Vollständiger Leitfaden zur PDF-Generierung mit Puppeteer: Von einfachen Dokumenten bis hin zu komplexen Berichten

Puppeteer ist eine Node.js-Bibliothek, die Chrome- oder Chromium-Browser automatisiert und damit ein leistungsstarkes Tool zum Erstellen von PDFs ist. Ob Sie einfache Dokumente oder komplexe Berichte erstellen, Puppeteer bietet Funktionen wie Native PDF-Unterstützung, benutzerdefinierte Layouts und Automatisierungsintegration um den Prozess zu rationalisieren.

Hauptfunktionen von Puppeteer zur PDF-Generierung:

• Einfaches Setup: Benutzen Puppeteer-basierter Headless-Browser und beginnen Sie mit der Generierung von PDFs mit wenigen Codezeilen.
• Anpassbare Layouts: Passen Sie Seitengröße, Ausrichtung, Ränder und mehr an.
• Dynamischer Inhalt: Rendern Sie JavaScript-lastige Seiten, wenden Sie benutzerdefinierte Stile an und fügen Sie Kopf- und Fußzeilen sowie Seitenzahlen ein.
• Kennzahlen: Schneller als Alternativen wie Selenium zur PDF-Erstellung.
• Skalierbarkeit: Bewältigt die PDF-Generierung im großen Maßstab, sogar für Tausende von Dokumenten täglich.

Warum es nützlich ist:

Puppeteer eignet sich perfekt für die Automatisierung von Arbeitsabläufen, die Erstellung von Berichten oder den Export von Webinhalten. Von Unternehmen, die Markendokumente erstellen, bis hin zu Entwicklern, die Datenvisualisierungen durchführen – Puppeteer vereinfacht den Prozess und sorgt für qualitativ hochwertige Ergebnisse.

Wenn Sie bereit sind, einzutauchen, führt Sie der Artikel durch die Einrichtung, Anpassung und erweiterten Funktionen wie die Handhabung großer Berichte und die Behebung häufiger Probleme.

sbb-itb-23997f1

Beginnen Sie mit der Verwendung des Headless Browsers auf Latenode, um Dateien zu konvertieren, die Webüberwachung zu automatisieren und mehr!

Latenode verfügt über eine direkte Integration eines Puppeteer-basierten Headless-Browsers, wodurch Sie diese Bibliothek in Ihre Automatisierungsszenarien integrieren können, um Daten von Websites zu scrapen, Screenshots zu machen, Dateien zu konvertieren und sogar Dienste zu automatisieren, die nicht über eine API verfügen.

Sie können Code beliebiger Komplexität hinzufügen, einschließlich Skripts zur Konvertierung von HTML in PDF. Sobald der Knoten konfiguriert ist, können Sie ihn verknüpfen mit viele weitere Integrationen zur Verbesserung Ihrer Automatisierung: KI-Modelle wie ChatGPT, Datenbanken wie Airtable, CRM-Systeme wie Webflow und viele andere Integrationen.

Beginnen Sie jetzt mit der Verwendung von Headless Browser, um Ihre Arbeit zu beschleunigen, zu verbessern und zu vereinfachen!

Grundlegende PDF-Einrichtung mit Puppeteer

Um mit Puppeteer PDFs erstellen zu können, müssen Sie es korrekt einrichten und die grundlegenden Konfigurationsoptionen verstehen. Hier ist eine Kurzanleitung, die Ihnen den Einstieg erleichtert.

Erstellen Ihrer ersten PDF-Datei

Um aus einer Webseite eine einfache PDF-Datei zu generieren, erstellen Sie eine app.js Datei 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 Arbeitsablauf: Starten eines Browsers, Öffnen einer Seite, Navigieren zu einer URL, Generieren der PDF-Datei und Schließen des Browsers.

Seiteneinstellungen und Layout

Puppeteer ermöglicht Ihnen die Anpassung verschiedener Einstellungen für die PDF-Erstellung. Nachfolgend finden Sie einige wichtige Optionen, die Sie ändern können:

Rahmen	Beschreibung	Beispielwert
Format	Papier größe	„Letter“, „A4“, „Legal“
Breite	Benutzerdefinierte Seitenbreite	„8.5 Zoll“, „215.9 mm“
Größe	Benutzerdefinierte Seitenhöhe	„11 Zoll“, „279.4 mm“
Landschaft	Seitenausrichtung	wahr / falsch
Marge	Seitenränder	{ oben: '1 Zoll', rechts: '1 Zoll', unten: '1 Zoll', links: '1 Zoll' }

Verwenden Sie beim Generieren von PDFs aus Webseiten die waitUntil: 'networkidle0' Dadurch wird sichergestellt, dass alle Netzwerkaktivitäten abgeschlossen sind, bevor die PDF-Datei generiert wird.

Für benutzerdefinierte HTML-Inhalte können Sie PDFs aus lokalen Dateien erstellen. Dies ist besonders hilfreich für Vorlagendokumente oder die Stapelverarbeitung. Aktualisieren Sie die page.goto() Funktion 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-Stile und Formatierungen in Ihren PDFs korrekt angezeigt. Für komplexere Anforderungen können Sie erweiterte Formatierungstechniken nutzen, um detaillierte PDF-Berichte zu erstellen.

PDF-Formatierungsoptionen

Puppeteer bietet zahlreiche Optionen zum Anpassen Ihrer PDFs. In den folgenden Abschnitten erfahren Sie, wie Sie Kopfzeilen einrichten, das Seitenlayout steuern und ein einheitliches Design gewährleisten.

Kopf- und Fußzeilen

Sie können Kopf- und Fußzeilen einfügen, indem Sie die PDF-Optionen mit HTML-Vorlagen anpassen. Hier 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' }
});

Hier sind die dynamischen Klassen, die Sie verwenden können:

• Datum: Fügt den aktuellen Zeitstempel hinzu.
• Titel: Zeigt den Dokumenttitel an.
• URL: Zeigt die Seiten-URL an.
• Seitennummer: Fügt die aktuelle Seitenzahl ein.
• Gesamtseiten: Gibt die Gesamtzahl der Seiten an.

Seitenumbrüche und Layoutsteuerung

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:

Rahmen	Optionen	Beispiel
Format	Brief, A4, Legal	Format: „Brief“
Abmessungen	Benutzerdefinierte Breite/Höhe	Breite: 8.5 Zoll, Höhe: 11 Zoll
Orientierung	Porträt / Landschaft	Landschaft: wahr
Die Margen	Benutzerdefinierter Abstand	Rand: { oben: '1 Zoll', unten: '1 Zoll' }

Schriftarten und visuelle Elemente

Optimieren Sie Schriftarten und Grafiken, damit sie zu Ihrem Branding passen:

• Benutzerdefinierte Web-Schriftarten:

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

• Schriftartenkonfiguration für Linux oder AWS Lambda Umgebungen:

export FONTCONFIG_FILE=/path/to/fonts.conf

Mit diesen Optionen können Sie PDFs erstellen, die elegant und professionell aussehen.

Erstellen komplexer PDF-Berichte

Die Erstellung komplexer PDF-Berichte erfordert viel Liebe zum Detail, insbesondere bei Datenvisualisierung, Layoutgestaltung und Leistung. Durch die Verbesserung grundlegender Formatierungstechniken können Sie professionelle Dokumente erstellen, die sich von der Masse abheben.

Tabellen und Datendiagramme

Verbessern Sie Ihre Berichte mit dynamischen Visualisierungen durch die Kombination Puppenspieler, D3.js und Lenker. Hier ist ein Beispiel-Setup für die Integration von Datendiagrammen:

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

Um sicherzustellen, dass Ihr PDF ein ansprechendes Aussehen erhält, 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 von Dokumenten auf Datenbasis. D3 hilft Ihnen, Daten mithilfe von HTML, SVG und CSS zum Leben zu erwecken.“

Sobald Ihre visuellen Elemente vorhanden sind, strukturieren Sie den Bericht mit Inhalten und Seitenzahlen.

Inhalt und Seitenzahlen

Folgen Sie diesen Schritten, um einen Inhaltsverzeichnis und stellen Sie eine genaue Seitennummerierung sicher:

1. Initial-PDF generieren Erstellen Sie die erste Version des PDF mit Kopf- und Fußzeilen:

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

2. Seitenzahlen analysieren und extrahieren Seitenzahlen extrahieren und Inhaltsverzeichnis dynamisch generieren:

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

3. Endgültiges 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 Schritte unternehmen, um die Leistung aufrechtzuerhalten.

Handhabung großer Berichte

Die effiziente Bearbeitung umfangreicher Berichte erfordert spezifische Optimierungen. Hier sind einige effektive Techniken:

Technik	Vorteile
Temporäre Dateinutzung	Reduziert den Speicherverbrauch um 20 %
CPU-Kernbegrenzung	Beschleunigt die Verarbeitung durch Aufgabenausgleich

Zum Beispiel, Carriyo's Die Implementierung im April 2024 generierte täglich 10,000 PDFs mit einer Latenz von 95 ms (365. Perzentil) auf AWS Lambda. So kann die temporäre Dateiverwaltung angewendet 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

Wenn bei 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 stellen sicher, dass die Erstellung Ihrer Berichte im großen Maßstab zuverlässig und effizient bleibt.

Häufige Probleme und Lösungen

Die Behebung häufiger Probleme ist entscheidend für einen reibungslosen und zuverlässigen Ablauf Ihrer automatisierten PDF-Workflows. Die folgenden Lösungen bauen auf den zuvor besprochenen Konfigurationsgrundlagen auf.

Browser-Kompatibilität

Im dritten Quartal 3 behob das Entwicklungsteam von Acme Corp. den Fehler „Chrome konnte nicht gestartet werden“ auf Ubuntu-Servern durch die Installation der erforderlichen Abhängigkeiten. Dies reduzierte die Fehlerrate um 2023 % und sparte 95 Stunden pro Woche an Debugging-Zeit.

Verwenden Sie bei Problemen beim Start von Chrome unter Windows die folgende Konfiguration:

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

Leitfaden zur Fehlerbehebung

So beheben Sie häufige Fehler effizient:

Fehlertyp	Die Lösung	Impact der HXNUMXO Observatorien
Modul nicht gefunden	Aktualisieren Sie Node.js auf v14+	Behebt Abhängigkeitskonflikte
Navigations-Timeout	Festlegen benutzerdefinierter Timeout-Werte	Verhindert vorzeitige Skriptfehler
Sandbox-Probleme	Berechtigungen anpassen	Gewährleistet eine sichere Ausführung

Um beispielsweise Navigationstimeouts zu verarbeiten, 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 die Fehler behoben sind, können Sie sich auf die Verbesserung der Geschwindigkeit konzentrieren, um die Effizienz Ihres Arbeitsablaufs zu steigern.

Geschwindigkeitsoptimierung

Nach der Fehlerbehandlung besteht der nächste Schritt darin, die PDF-Generierungsgeschwindigkeit zu erhöhen. Beispielsweise generiert Carriyo täglich 10,000 PDFs mit einer p95-Latenz von 365 ms auf AWS Lambda.

Hier ist ein Codeausschnitt zur Leistungsoptimierung durch 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' }
        });
    }
});

Berücksichtigen Sie bei groß angelegten Operationen die folgenden Strategien:

• Ressourcenmanagement: Halten Sie Browserinstanzen auf serverlosen Plattformen warm, um Kaltstarts zu vermeiden, die die Latenz erhöhen.
• Systemkonfiguration: Beschränken Sie auf einem 4-Core-System die gleichzeitige PDF-Generierung auf drei Prozesse, um eine bessere Stabilität zu erzielen.
• Network Optimization: Verwenden Sie die Netzwerk-Interception-APIs von Puppeteer, um statische Assets lokal bereitzustellen.

„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

Verwenden von Puppeteer mit Latenknoten

Latenode vereinfacht die Verwendung von Puppeteer zum Generieren von PDFs und bietet eine skalierbare und kosteneffiziente Möglichkeit zur Automatisierung von Dokument-Workflows.

So funktioniert Latenode

Latenode kombiniert die PDF-Funktionen von Puppeteer mit Tools wie einem visuellen Workflow-Builder, KI-gestützter Codegenerierung und bedingter Logik. Es unterstützt außerdem eine breite Palette von NPM-Paketen. Die Plattform nutzt ein zeitbasiertes Kreditsystem, das die Kosten für die PDF-Automatisierung effizient verwaltet.

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

Hier sind die herausragenden Funktionen der PDF-Automatisierung:

• Integrierte Headless-Browserautomatisierung
• KI-gestützte Generierung von benutzerdefiniertem Code
• Ein visueller Workflow-Builder zum Einrichten der PDF-Logik
• Unterstützung für bedingte Verzweigungen in Workflows

Einrichten von Puppeteer in Latenode

Um Puppeteer zur PDF-Generierung auf Latenode zu verwenden, können Sie dieser grundlegenden Einrichtung folgen:

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 Sicherheit der Dokumenterstellung zu gewährleisten, speichern Sie vertrauliche Informationen wie Anmeldeinformationen in Umgebungsvariablen:

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

Dieses Setup gewährleistet einen sicheren und effizienten Workflow zum Erstellen von PDFs.

Vergleich von Automatisierungsplattformen

Bei der Entscheidung für eine Plattform zur PDF-Automatisierung schneidet Latenode im Vergleich zu herkömmlichen Tools wie folgt ab:

Merkmal	Latenknoten	Herkömmliche Automatisierungstools
Preismodell	Zeitbasierte Credits ab 5 $/Monat	Lizenzierung pro Dokument oder Benutzer
Workflow-Grenzen	20–unbegrenzt	Oft durch gleichzeitige Ausführungen eingeschränkt
NPM-Paketunterstützung	Über 1 Million Pakete	Normalerweise beschränkt auf plattformspezifische Module
Ausführungsverlauf	Aufbewahrung für 1–60 Tage	Oft auf grundlegende Protokollierung beschränkt

Für den Einsatz in Unternehmen bietet Latenodes Prime-Plan (297 $/Monat) Unterstützung für bis zu 1.5 Millionen Szenarioläufe und speichert den Ausführungsverlauf 60 Tage lang. Dies macht ihn zu einer hervorragenden Wahl für Unternehmen mit hohem PDF-Generierungsbedarf.

Die Plattform vereinfacht auch Aufgaben wie das Ändern des Seitenstils vor der PDF-Erstellung. Mit diesem Codeausschnitt können Sie beispielsweise bestimmte Elemente ausblenden:

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

Diese Flexibilität trägt dazu bei, selbst die komplexesten PDF-Workflows zu optimieren.

Schlussfolgerung

Hauptpunkte der Überprüfung

Puppeteer ist ein leistungsstarkes Tool zum Erstellen von PDFs, egal ob Sie mit einfachen Dokumenten oder komplexen Berichten arbeiten. Dank seiner Fähigkeit, moderne Webtechnologien zu verarbeiten und die PDF-Ausgabe präzise zu steuern, eignet es sich hervorragend für umfangreiche Anwendungsfälle.

Zum Beispiel, Carriyo Im April 2024 nutzte Puppeteer erfolgreich, um täglich 10,000 PDFs für Versandetiketten auf AWS Lambda zu generieren. Sie erreichten eine p95-Latenz von 365 ms bei Kosten von 7.68 $ für 430,000 Aufrufe.

Hier sind einige herausragende Funktionen und ihre praktischen Vorteile:

Merkmal	Vorteile	Auswirkungen auf die reale Welt
Kopfloser Browser	Ermöglicht serverseitiges Rendering mit modernen Webfunktionen	Verarbeitet dynamische Inhalte, JavaScript und CSS präzise
Ressourcenoptimierung	Speichert Assets im Cache und deaktiviert ungenutzte Funktionen, um die Leistung zu steigern	Verbessert die Effizienz bei der PDF-Erstellung
Fehlerbehandlung	Enthält Wiederholungsmechanismen und Timeout-Kontrollen	Gewährleistet Zuverlässigkeit in Produktionsumgebungen
Skalierbarkeit	Unterstützt die Generierung großer PDF-Volumina	Bewährte Leistung bei hoher Arbeitsbelastung

Erste Schritte

Um Puppeteer optimal zu nutzen, beachten Sie für eine erfolgreiche Bereitstellung die folgenden Schritte:

• Leistungsoptimierung: Verwenden Sie die userDataDir Einstellung zum Zwischenspeichern von Ressourcen und Deaktivieren nicht verwendeter Funktionen, um die PDF-Generierung zu beschleunigen.
• Ressourcenmanagement: Generieren Sie PDFs auf der Serverseite, um die Belastung der Clientgeräte zu reduzieren, insbesondere bei Aufgaben mit hohem Volumen.
• Fehlerbehandlung: Implementieren Sie robuste Fehlerbehandlungsstrategien mit Timeouts und Wiederholungsmechanismen, um die Stabilität der Produktionsumgebungen zu gewährleisten.

Für ein noch reibungsloseres Erlebnis können Sie Puppeteer mit Plattformen wie Latenode integrieren, um Arbeitsabläufe zu vereinfachen und gleichzeitig die Spitzenleistung aufrechtzuerhalten.

Ähnliche Blog-Beiträge

• Node.js Headless Browser: Übersicht der besten Lösungen
• Installieren und Konfigurieren von Puppeteer: Lösen häufiger Abhängigkeits- und Chromium-Probleme
• Screenshots mit Puppeteer erstellen: Ganzseitige Aufnahmen, Elemente und Größenoptimierung
• Formularautomatisierung mit Puppeteer: Texteingabe, Formularausfüllen und Benutzersimulation