HTML mit Puppeteer in PDF konvertieren: Stilkonfiguration und Paginierung

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:

PDFs generieren: Verwenden Sie Puppeteer, um HTML in ansprechende PDFs zu konvertieren, während Sie JavaScript ausführen und benutzerdefiniertes CSS anwenden.
Kontrollstile: Definieren Sie Seitengrößen, Ränder, Schriftarten, Kopf- und Fußzeilen und mehr mithilfe von druckspezifischem CSS.
Seitenumbrüche verwalten: Verwenden Sie CSS-Regeln, um das Aufteilen von Tabellen, Überschriften oder Bildern auf mehrere Seiten zu vermeiden.
Leistung optimieren: Verbessern Sie die Qualität und reduzieren Sie die Dateigröße durch Skalierung, Bildoptimierung und effiziente Ressourcenverwaltung.

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:

Seitenanpassung mit @page Regeln.
Kopf-/Fußzeilenvorlagen für professionelle Layouts.
Mehrseitige Inhaltsverwaltung, um ungünstige Aufteilungen in Tabellen oder Text zu vermeiden.

Mit Puppeteer können Sie die PDF-Generierung automatisieren und anpassen, um konsistente, qualitativ hochwertige Ergebnisse zu erzielen.

🌐 Konvertieren Sie HTML in PDF mit Puppenspieler in Node.js 🚀 Voller Schritt ...

Erste Schritte mit Puppeteer

Erfahren Sie, wie Sie Puppeteer zum Erstellen von PDFs einrichten und verwenden. Folgen Sie diesen Schritten, um loszulegen.

Einrichtung

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:

Installieren Sie Node.js: Laden Sie es herunter von nodejs.org und schließen Sie die Installation ab.
Erstellen Sie einen Projektordner: Erstellen Sie einen neuen Ordner für Ihr Projekt.
Initialisieren Sie das Projekt: Öffnen Sie ein Terminal in Ihrem Projektordner und führen Sie npm init -y.
Installieren Sie Puppenspieler: Verwenden Sie den Befehl npm install puppeteer um Puppeteer zu Ihrem Projekt hinzuzufügen.

Erstes PDF-Generierungsskript

Hier ist ein einfaches Skript zum Konvertieren von HTML in PDF mit Puppeteer:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">generatePDF</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();

  <span class="hljs-comment">// Set page content</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setContent</span>(<span class="hljs-string">`
    <html>
      <body>
        <h1>Sample PDF Document</h1>
        <p>Generated with Puppeteer</p>
      </body>
    </html>
  `</span>);

  <span class="hljs-comment">// Generate PDF</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'output.pdf'</span>,
    <span class="hljs-attr">format</span>: <span class="hljs-string">'Letter'</span>,
    <span class="hljs-attr">margin</span>: {
      <span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
      <span class="hljs-attr">right</span>: <span class="hljs-string">'1in'</span>,
      <span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>,
      <span class="hljs-attr">left</span>: <span class="hljs-string">'1in'</span>
    }
  });

  <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}

<span class="hljs-title function_">generatePDF</span>();

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.

HTML-Quelloptionen

Puppeteer bietet mehrere Möglichkeiten zum Laden von HTML-Inhalten für die PDF-Generierung:

Direktes Laden von Inhalten: Verwenden Sie eine Zeichenfolge, die das HTML enthält.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setContent</span>(htmlString);

Lokaler Dateizugriff: Laden Sie eine HTML-Datei von Ihrem lokalen System.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">`file:<span class="hljs-subst">${path.join(__dirname, <span class="hljs-string">'template.html'</span>)}</span>`</span>);

Remote-URL-Laden: HTML von einer Live-Website abrufen.

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://yourwebsite.com/page-to-convert'</span>);

Achten Sie beim Arbeiten mit externen Ressourcen wie Bildern oder Stilen darauf, dass diese eingebettet sind, absolute URLs verwenden oder lokal gespeichert sind.

Tipps für eine bessere Leistung

Um eine reibungslose PDF-Erstellung zu gewährleisten, beachten Sie die folgenden Hinweise:

Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, page.waitForNetworkIdle() um zu warten, bis alle Netzwerkanforderungen abgeschlossen sind.
Legen Sie entsprechende Timeouts für das Laden von Ressourcen fest.
Behandeln Sie das Laden von Schriftarten explizit, um Darstellungsprobleme zu vermeiden.

Sobald Ihr HTML fertig ist, können Sie mit der Anpassung der Stile und Einstellungen des PDFs fortfahren.

PDF-Stileinstellungen

Druckspezifische CSS-Regeln

Um Ihren Inhalt für die PDF-Ausgabe anzupassen, verwenden Sie @media print Regeln. Hier ist ein Beispiel:

<span class="hljs-keyword">@media</span> print {
  <span class="hljs-comment">/* Hide navigation menus and non-essential elements */</span>
  <span class="hljs-selector-tag">nav</span>, <span class="hljs-selector-tag">button</span>, <span class="hljs-selector-class">.no-print</span> {
    <span class="hljs-attribute">display</span>: none;
  }

  <span class="hljs-comment">/* Adjust text for better readability in PDFs */</span>
  <span class="hljs-selector-tag">body</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12pt</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;
  }

  <span class="hljs-comment">/* Ensure accurate background rendering */</span>
  * {
    -webkit-<span class="hljs-attribute">print-color-adjust</span>: 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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateMediaType</span>(<span class="hljs-string">'screen'</span>);

Sobald die Druckstile angewendet wurden, können Sie mit den Layoutanpassungen fortfahren.

Seitenlayouteinstellungen

Definieren Sie PDF-Abmessungen mithilfe von Puppeteer-Optionen oder CSS @page Regeln. Für Puppeteer können Sie die folgende Konfiguration verwenden:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">format</span>: <span class="hljs-string">'Letter'</span>,
  <span class="hljs-attr">margin</span>: {
    <span class="hljs-attr">top</span>: <span class="hljs-string">'0.75in'</span>,
    <span class="hljs-attr">right</span>: <span class="hljs-string">'0.5in'</span>,
    <span class="hljs-attr">bottom</span>: <span class="hljs-string">'0.75in'</span>,
    <span class="hljs-attr">left</span>: <span class="hljs-string">'0.5in'</span>
  },
  <span class="hljs-attr">landscape</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">preferCSSPageSize</span>: <span class="hljs-literal">true</span>
});

Für individuellere Seitengrößen verwenden Sie CSS @page Regeln:

<span class="hljs-keyword">@page</span> {
  size: <span class="hljs-number">8.5in</span> <span class="hljs-number">11in</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0.75in</span> <span class="hljs-number">0.5in</span>;
}

Nachdem Sie das Layout eingerichtet haben, können Sie die Designelemente für ein elegantes Erscheinungsbild optimieren.

Text- und Designelemente

Um den Inhalt optisch klar und professionell zu gestalten, verwenden Sie diese CSS-Regeln:

<span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Arial'</span>, sans-serif;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#333333</span>;
}

<span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span> {
  <span class="hljs-attribute">page-break-after</span>: avoid;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#000000</span>;
}

<span class="hljs-selector-tag">table</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">border-collapse</span>: collapse;
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

<span class="hljs-selector-tag">img</span> {
  <span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">height</span>: auto;
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

Fügen Sie für einheitliche Hintergrundfarben, insbesondere in kritischen Abschnitten, diese Regel hinzu:

<span class="hljs-selector-class">.color-critical</span> {
  -webkit-<span class="hljs-attribute">print-color-adjust</span>: exact;
}

Diese Anpassungen stellen sicher, dass Ihr PDF leicht lesbar und optisch ansprechend ist.

sbb-itb-23997f1

Seitenumbruchsteuerung

CSS-Eigenschaften für Seitenumbrüche

Durch effektives Verwalten von Seitenumbrüchen wird ein reibungsloser Seitenfluss gewährleistet. Verwenden Sie diese CSS-Eigenschaften, um die Inhaltstrennung zu steuern:

<span class="hljs-comment">/* Start new page before chapters */</span>
<span class="hljs-selector-class">.chapter</span> {
  <span class="hljs-attribute">page-break-before</span>: always;
}

<span class="hljs-comment">/* Keep headings together with their content */</span>
<span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span> {
  <span class="hljs-attribute">page-break-after</span>: avoid;
}

<span class="hljs-comment">/* Avoid splitting tables or figures */</span>
<span class="hljs-selector-tag">table</span>, <span class="hljs-selector-tag">figure</span> {
  <span class="hljs-attribute">page-break-inside</span>: 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.

Kopf- und Fußzeilen-Setup

Richten Sie Kopf- und Fußzeilen in Puppeteer ein, um Ihrem PDF ein professionelles Aussehen zu verleihen:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">displayHeaderFooter</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">headerTemplate</span>: <span class="hljs-string">`
    <div style="font-size: 10px; padding: 0 0.5in; width: 100%;">
      <span class="title"></span>
      <span class="date" style="float: right;"></span>
    </div>
  `</span>,
  <span class="hljs-attr">footerTemplate</span>: <span class="hljs-string">`
    <div style="font-size: 10px; text-align: center; width: 100%;">
      Page <span class="pageNumber"></span> of <span class="totalPages"></span>
    </div>
  `</span>,
  <span class="hljs-attr">margin</span>: {
    <span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
    <span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>
  }
});

Achten Sie darauf, die Ränder so anzupassen, dass Kopf- und Fußzeile richtig passen, ohne Ihren Inhalt zu überlappen.

Verwaltung mehrseitiger Inhalte

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:

<span class="hljs-comment">/* Keep captions with their images */</span>
<span class="hljs-selector-tag">figure</span> {
  <span class="hljs-attribute">display</span>: table;
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

<span class="hljs-selector-tag">figcaption</span> {
  <span class="hljs-attribute">display</span>: table-caption;
  <span class="hljs-attribute">caption-side</span>: bottom;
}

<span class="hljs-comment">/* Avoid splitting list items or table rows */</span>
<span class="hljs-selector-tag">li</span>, <span class="hljs-selector-class">.table-row</span> {
  <span class="hljs-attribute">page-break-inside</span>: avoid;
}

<span class="hljs-comment">/* Allow large tables to break across pages */</span>
<span class="hljs-selector-class">.table-wrapper</span> {
  <span class="hljs-attribute">page-break-inside</span>: 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 printBackground Option in Puppeteer zum Rendern aller visuellen Elemente, einschließlich Hintergrundfarben und Bildern:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">preferCSSPageSize</span>: <span class="hljs-literal">true</span>
});

PDF-Qualität und -Leistung

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.

Methoden zur Inhaltsskalierung

Durch die korrekte Skalierung von Inhalten bleibt der Inhalt lesbar und das Design konsistent. Puppeteer bietet detaillierte Skalierungssteuerungen für die PDF-Darstellung:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
  <span class="hljs-attr">scale</span>: <span class="hljs-number">0.8</span>,
  <span class="hljs-attr">preferCSSPageSize</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">format</span>: <span class="hljs-string">'Letter'</span>
});

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:

<span class="hljs-keyword">@page</span> {
  size: <span class="hljs-number">8.5in</span> <span class="hljs-number">11in</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0.5in</span>;
}

Bildqualitätsmanagement

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1200</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">800</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});

Häufige Probleme und Lösungen

Durch die Bewältigung allgemeiner Herausforderungen wie Ressourcenverwaltung, Dateigröße und Fehler kann die Leistung erheblich gesteigert werden.

Ressourcenmanagement
Verwenden Sie eine einzelne Browserinstanz und -seite, um mehrere PDF-Anfragen zu verarbeiten und so den Aufwand zu reduzieren:

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});

<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> request <span class="hljs-keyword">of</span> requests) {
  <span class="hljs-keyword">await</span> <span class="hljs-title function_">generatePDF</span>(page, request);
}

Optimierung der Dateigröße
Minimieren Sie die Dateigröße, indem Sie unnötige Elemente entfernen und Bilder optimieren:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.no-print'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> el.<span class="hljs-title function_">remove</span>());

  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'img'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">img</span> =></span> {
    img.<span class="hljs-property">loading</span> = <span class="hljs-string">'lazy'</span>;
    img.<span class="hljs-property">decoding</span> = <span class="hljs-string">'async'</span>;
  });
});

Fehlerbehandlung
Implementieren Sie Strategien zur Behandlung von Fehlern wie Timeouts und Wiederholungsversuchen:

<span class="hljs-keyword">const</span> <span class="hljs-title function_">generatePDF</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">page, options</span>) => {
  <span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(options.<span class="hljs-property">url</span>, {
      <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
      <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
    });
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>(options);
  } <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'PDF generation failed:'</span>, error);
    <span class="hljs-keyword">throw</span> error;
  }
};

Fazit

Die Verwendung von Puppeteer zum Konvertieren von HTML in PDF bietet effektive Tools zum Erstellen professioneller Dokumente.

Wichtige Schritte

Übernehmen Sie die Druckmedieneinstellungen mit page.emulateMediaType('print').
Verwenden Sie CSS-Regeln wie 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.

Erweiterte Automatisierungsoptionen

Mit diesen zusätzlichen Automatisierungsfunktionen können Sie die PDF-Erstellung weiter vorantreiben:

Umgebungskonfiguration
Richten Sie Cache-Verzeichnisse und Browsereinstellungen ein, um konsistente Ergebnisse auf verschiedenen Plattformen sicherzustellen.
Performance-Verbesserungen
Passen Sie die Timeout-Einstellungen an und fügen Sie Wiederholungsmechanismen hinzu, um die Zuverlässigkeit während des Generierungsprozesses zu verbessern.

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.

Konvertieren von HTML in PDF mit Puppeteer: Stilkonfiguration und Paginierung