WMP Sites

Mit Node.js HTML in PDF umwandeln: Einfache und effektive Lösungen

Lukas Fuchs vor 3 Tagen JavaScript 3 Min. Lesezeit

Node.js-Module für die HTML-zu-PDF-Konvertierung

Um HTML in PDF umzuwandeln, kannst du verschiedene Node.js-Module nutzen. Jedes Modul hat seine eigenen Vor- und Nachteile. Hier sind einige der beliebtesten Optionen:

puppeteer

Beschreibung: Puppeteer ist ein von Google entwickelter Headless-Browser, der es dir ermöglicht, Webseiten wie ein echter Browser zu rendern. Er bietet eine umfassende API zur Steuerung der Browser-Aktivitäten, einschließlich der PDF-Generierung.

Vorteile:

  • Es ist einfach zu bedienen und erfordert keine zusätzlichen Abhängigkeiten.
  • Es rendert Webseiten präzise, einschließlich aller Elemente wie Bilder, Schriftarten und Tabellen.
  • Bietet erweiterte Optionen für die PDF-Anpassung, wie z. B. Seitenränder, Kopf- und Fußzeilen.

html-pdf

Beschreibung: Html-pdf ist ein leichtgewichtiges Modul, das HTML mithilfe von wkhtmltopdf in PDF umwandelt. Wkhtmltopdf ist ein externes Dienstprogramm, das auf deinem System installiert sein muss.

Vorteile:

  • Schnelle und effiziente Konvertierungen.
  • Unterstützt eine Vielzahl von HTML-Elementen und CSS-Stilen.
  • Bietet grundlegende Optionen für die PDF-Anpassung, wie z. B. Seitenausrichtung und Papierformat.

pdfkit

Beschreibung: Pdfkit ist eine Low-Level-Bibliothek zur Generierung von PDFs von Grund auf. Sie bietet eine umfangreiche API, mit der du benutzerdefinierte PDF-Dokumente erstellen kannst.

Vorteile:

  • Volle Kontrolle über den PDF-Inhalt und das Layout.
  • Ermöglicht die dynamische Generierung von PDFs mit Daten aus anderen Quellen.
  • Unterstützt mehrere Streaming-Formate, einschließlich JPEG, PNG und SVG.

*Auswahl des richtigen Moduls

Die Wahl des richtigen Moduls hängt von deinen spezifischen Anforderungen ab. Wenn du nach einer einfachen und sofort einsatzbereiten Lösung suchst, ist Puppeteer eine gute Option. Html-pdf eignet sich für grundlegende Konvertierungen, während Pdfkit maximale Flexibilität und Kontrolle bietet.

Schritt-für-Schritt-Anleitung zur Konvertierung von HTML zu PDF

Installation der benötigten Pakete

Installiere zunächstä die benötigten Node.js-Module über npm:

npm install html-pdf

Erstelle ein HTML-Dokument

Erstelle ein HTML-Dokument mit dem Inhalt, den du in PDF konvertieren möchtest.

Importiere das Modul und lade das HTML

Importiere das html-pdf-Modul in deine Node.js-Datei und lade das HTML-Dokument, das du konvertieren möchtest:

const htmlPdf = require('html-pdf');
const fs = require('fs');

const html = fs.readFileSync('document.html', 'utf8');

Konvertiere HTML zu PDF

Konvertiere nun das HTML in PDF, indem du die create-Methode des Moduls aufrufst:

htmlPdf.create(html).toFile('document.pdf', function(err, res) {
  if (err) {
    return console.log(err);
  }
  console.log('Das PDF wurde erfolgreich erstellt!');
});

Zusätzliche Optionen

Die create-Methode bietet zusätzliche Optionen zur Anpassung des generierten PDFs:

  • Seitenformat (z.B. A4, Letter)
  • Seitenränder
  • Ausrichtung
  • Kopf- und Fußzeilen
  • Sicherheitseinstellungen

Beispiel:

const options = {
  format: 'A4',
  marginLeft: '20mm',
  marginRight: '20mm',
  header: {
    height: '15mm',
    contents: '<p align="center">Mein PDF-Header</p>'
  },
  footer: {
    height: '10mm',
    contents: '<p align="center">Seite {page} von {pages}</p>'
  }
};

htmlPdf.create(html, options).toFile('document.pdf', function(err, res) {
  ...
});

Anpassung der PDF-Ausgabe (Seitenränder, Kopf- und Fußzeilen)

Nachdem du dein HTML in PDF konvertiert hast, kannst du die Ausgabe an deine spezifischen Anforderungen anpassen. Dies umfasst die Einstellung der Seitenränder sowie das Hinzufügen von Kopf- und Fußzeilen.

Seitenränder festlegen

Mit Node.js-Modulen wie html-pdf oder pdfkit kannst du die Seitenränder deines PDFs anpassen. Die folgende Syntax zeigt, wie du die Ränder in Millimetern festlegst:

pdf.margins({
  top: 10,
  right: 15,
  bottom: 20,
  left: 10
});

Kopf- und Fußzeilen hinzufügen

Kopf- und Fußzeilen können deinem PDF zusätzliche Informationen wie Seitenzahlen oder Unternehmenslogos hinzufügen. Mit html-pdf kannst du Kopf- und Fußzeilen folgendermaßen hinzufügen:

pdf.header('<p>Beispiel-Kopfzeile</p>');
pdf.footer('<p>Beispiel-Fußzeile <%= page %> von <%= totalPages %></p>');

Wenn du zusätzliche Kontrolle über die Gestaltung deiner Kopf- und Fußzeilen benötigst, kannst du stattdessen die pdfkit-Bibliothek verwenden.

Weitere Anpassungsoptionen

Zusätzlich zu Seitenrändern und Kopf- und Fußzeilen kannst du mit Node.js-Modulen wie html-pdf und pdfkit weitere Aspekte der PDF-Ausgabe anpassen, darunter:

  • Seitenformat: Wähle A4, Letter oder ein benutzerdefiniertes Format.
  • Ausrichtung: Lege die Ausrichtung des Inhalts auf Hoch- oder Querformat fest.
  • Schriftarten: Einbetten benutzerdefinierter Schriftarten oder Verwenden von Standardschriftarten.
  • Wasserzeichen: Füge deinem PDF ein Wasserzeichen hinzu, um es vor unbefugter Verwendung zu schützen.

Behandlung von Bildern und externen Ressourcen

Beim Konvertieren von HTML zu PDF musst du auch die Einbindung von Bildern und externen Ressourcen wie CSS-Dateien und JavaScript-Skripten berücksichtigen. Hier sind einige wichtige Überlegungen:

Bilder

  • Lokale Bilder einbetten: Verwende die file://-URL, um lokale Bilder in dein HTML einzubetten. Beispiel: <img src="file:///path/to/image.png">.
  • Remote-Bilder herunterladen: Wenn deine Bilder auf einem Remote-Server liegen, musst du sie lokal herunterladen und in dein HTML einbetten, bevor du die Konvertierung durchführst. Du kannst Bibliotheken wie axios oder fetch verwenden, um Remote-Ressourcen abzurufen.
  • Bildgröße anpassen: Du kannst die Größe der eingebetteten Bilder mithilfe von CSS oder den Optionen des PDF-Konverters anpassen. Auf diese Weise kannst du die Dateigröße der PDF-Datei reduzieren oder Bilder an eine bestimmte Größe anpassen.

Externe Ressourcen

  • CSS-Dateien einbinden: Verwende das <link>-Tag, um externe CSS-Dateien in dein HTML einzubinden. Beispiel: <link href="style.css" rel="stylesheet">.
  • JavaScript-Skripte einbinden: Du kannst JavaScript-Skripte mithilfe des <script>-Tags einbinden. Beispiel: <script src="script.js"></script>.
  • Abhängigkeiten verwalten: Falls du externe Ressourcen wie Schriftarten oder Bibliotheken benötigst, musst du sicherstellen, dass diese ebenfalls in die PDF-Datei eingebettet werden. Verwende Bibliotheken wie html-pdf oder wkhtmltopdf, die die Einbettung externer Ressourcen unterstützen.

Automatisierung der HTML-zu-PDF-Konvertierung

Die Automatisierung der HTML-zu-PDF-Konvertierung bietet zahlreiche Vorteile, etwa eine verbesserte Effizienz und eine reduzierung des manuellen Arbeitsaufwands. In diesem Abschnitt erfährst du, wie du mit Node.js die HTML-zu-PDF-Konvertierung automatisieren kannst.

Warteschlangensysteme

Eine gängige Methode zur Automatisierung ist die Verwendung von Warteschlangensystemen. Diese Systeme, wie z. B. RabbitMQ, verarbeiten asynchron eingehende Konvertierungsanforderungen. Du kannst HTML-Dateien in die Warteschlange einreihen und einen Hintergrundprozess einrichten, der die Konvertierungen verarbeitet und die PDF-Dateien speichert.

Geplante Aufgaben

Du kannst auch geplante Aufgaben verwenden, um die HTML-zu-PDF-Konvertierung zu automatisieren. Bibliotheken wie Node-Cron ermöglichen es dir, Jobs zu bestimmten Zeitpunkten oder Intervallen einzuplanen. So kannst du beispielsweise jeden Tag um Mitternacht HTML-Dateien konvertieren.

Webhooks

Wenn deine HTML-Dateien über Webhooks aktualisiert werden, kannst du einen Serverless-Ansatz verwenden, um die Konvertierung zu automatisieren. Du kannst Dienste wie AWS Lambda oder Google Cloud Functions verwenden, um Funktionen einzurichten, die HTML-Aktualisierungen abfangen und die Konvertierung auslösen.

Integration mit CMS

Wenn du ein Content-Management-System (CMS) verwendest, kannst du dessen API nutzen, um die HTML-zu-PDF-Konvertierung zu automatisieren. Du kannst beispielsweise einen Auslöser erstellen, der eine Konvertierung startet, wenn eine neue HTML-Seite veröffentlicht wird.

Vorteile der Automatisierung

  • Effizienzsteigerung: Automatisierung spart Zeit und reduziert den manuellen Arbeitsaufwand.
  • Verbesserte Genauigkeit: Automatisierte Prozesse sind in der Regel genauer als manuelle Prozesse.
  • Skalierbarkeit: Warteschlangensysteme und geplante Aufgaben ermöglichen die Skalierung der Konvertierungen je nach Bedarf.
  • Zuverlässigkeit: Automatisierte Prozesse sind in der Regel zuverlässiger als manuelle Prozesse.
  • Integration: Die Integration mit CMS und anderen Systemen ermöglicht einen nahtlosen Workflow.

Fehlerbehebung bei häufigen Problemen

Bei der Konvertierung von HTML zu PDF können verschiedene Probleme auftreten. Hier findest du einige Tipps zur Fehlerbehebung für gängige Stolpersteine:

Fehlende oder ungültige HTML-Dokumente

  • Überprüfe, ob du das richtige HTML-Dokument angibst: Stelle sicher, dass der Dateipfad zum Ziel-HTML-Dokument korrekt ist.
  • Überprüfe die Syntax deines HTML-Dokuments: Stelle sicher, dass dein HTML-Dokument gut geformt ist und keine Syntaxfehler enthält. Du kannst Tools wie den HTML-Validator verwenden, um mögliche Probleme zu identifizieren.

Probleme mit Bildern oder externen Ressourcen

  • Überprüfe die URLs deiner Bilder und externen Ressourcen: Stelle sicher, dass die URLs korrekt sind und dass die Ressourcen zugänglich sind.
  • Verwende absolute URLs: Verwende absolute URLs für Bilder und externe Ressourcen, um sicherzustellen, dass sie auch beim Konvertieren in PDF korrekt aufgelöst werden.

Probleme mit der PDF-Ausgabe

  • Überprüfe die Seitengröße und Ausrichtung: Stelle sicher, dass die angegebene Seitengröße und Ausrichtung mit dem gewünschten PDF-Layout übereinstimmen.
  • Passe die Seitenränder an: Passe die Seitenränder an, um sicherzustellen, dass der PDF-Inhalt nicht abgeschnitten wird.
  • Überprüfe die Kopf- und Fußzeilen: Stelle sicher, dass die Kopf- und Fußzeilen wie erwartet angezeigt werden.

Konvertierungsprobleme

  • Überprüfe die verwendeten Node.js-Module: Vergewissere dich, dass du die neuesten Versionen der für die Konvertierung verwendeten Node.js-Module verwendest.
  • Aktualisiere deine Node.js-Version: Stelle sicher, dass du die neueste Version von Node.js verwendest, da ältere Versionen möglicherweise nicht alle Funktionen der Konvertierungsmodule unterstützen.
  • Überprüfe die Verfügbarkeit von Ressourcen: Stelle sicher, dass dein System über genügend Speicher und CPU-Ressourcen verfügt, um die Konvertierung durchzuführen.

Weitere Beiträge

Folge uns

Neue Beiträge

Frontend

HTML Kontrollkästchen: Ausführliche Anleitung zum Einfügen von Kontrollkästchen in deine Website

AUTOR • Jul 05, 2026
JavaScript

JavaScript Variablen effektiv in HTML ausgeben: So machst du es sauber, sicher und schnell

AUTOR • Jul 05, 2026
Frontend

HTML Tabellen erstellen: Der umfassende Leitfaden zur Erstellung und Verwendung

AUTOR • Jul 04, 2026
Frontend

Das Element in HTML: Bedeutung, Verwendung und Best Practices für sauberen Code

AUTOR • Jul 04, 2026
API & Webservices

HTTP Statuscodes: ein umfassender Überblick für bessere Websites und weniger Fehler

AUTOR • Jul 04, 2026
Frontend

Form action beim Formularsenden verstehen und optimieren: So holst du mehr aus jedem Formular heraus

AUTOR • Jul 04, 2026
Frontend

Anleitung zum Erstellen einer HTML-Seite von Grund auf: So baue ich eine Website ohne Framework

AUTOR • Jul 04, 2026
API & Webservices

Statuscode 401 verstehen: Bedeutung von „Nicht autorisiert“ einfach erklärt

AUTOR • Jul 04, 2026
Frameworks & Libraries

React Bootstrap Tabs: So erstellen Sie benutzerfreundliche Registerkarten-Schnittstellen

AUTOR • Jul 04, 2026
Frontend

Kreise mit CSS erzeugen: Runde Elemente auf Ihrer Website schnell und sauber umsetzen

AUTOR • Jul 04, 2026
Frontend

So formatieren Sie HTML E-Mails: Der umfassende Leitfaden für saubere, klickstarke Newsletter

AUTOR • Jul 04, 2026
Frontend

HTML Cleaner: Das Werkzeug zur Optimierung und Verbesserung Ihres Website-Codes

AUTOR • Jul 04, 2026
Frontend

CSS Padding vs Margin: Der wesentliche Unterschied und warum er wichtig ist

AUTOR • Jul 04, 2026
Frontend

Vom Figma Prototyp zur Wirklichkeit: So konvertiere ich Figma Designs in HTML und CSS

AUTOR • Jul 04, 2026
Frontend

Div Container: Der ultimative Leitfaden zur Strukturierung von Webinhalten

AUTOR • Jul 04, 2026
Frontend

Gestalte die perfekte HTML Navigationsleiste für deine Website: Struktur, UX und SEO

AUTOR • Jul 04, 2026
API & Webservices

HTTP Statuscode 400: Alles, was Sie über Bad Request wissen müssen

AUTOR • Jul 04, 2026
Frontend

HTML in MP4 konvertieren: Schritt-für-Schritt-Anleitung für schnelle Ergebnisse

AUTOR • Jul 04, 2026
Frontend

HTML Links in einem neuen Tab öffnen: So setzt du target="_blank" richtig ein

AUTOR • Jul 04, 2026
Frontend

Optimale Bildpositionierung mit HTML: So baust du effektive Layouts, die funktionieren

AUTOR • Jul 04, 2026

Beliebte Beiträge

DevOps & Deployment

Erfolgreiche Strategien zur Optimierung Ihres Gigacube Netzwerks

AUTOR • Jun 16, 2025
Frontend

Kreative Wünsche zum Neuen Jahr: Inspiration für Deine Neujahrsgrüße

AUTOR • May 12, 2025
Frontend

Die Moral für Fabel: Lehren aus den Geschichten der Tiere

AUTOR • May 05, 2025
Backend

Autokennzeichen RH

AUTOR • Jul 23, 2024
Backend

BLK Kennzeichen: Alles, was Sie darüber wissen müssen

AUTOR • Jul 23, 2024
API & Webservices

Autokennzeichen ME: Alles, was Sie über das Kfz-Kennzeichen für Mainz wissen müssen

AUTOR • Jun 18, 2024
DevOps & Deployment

Finde ausschließen: Verborgene Elemente in Suchanfragen entdecken

AUTOR • May 06, 2024
DevOps & Deployment

Effektive Handhabung von ZIP-Dateien auf Linux-Systemen

AUTOR • May 06, 2024
DevOps & Deployment

Erstellung von Ubuntu-Diensten: Eine umfassende Anleitung

AUTOR • May 06, 2024
DevOps & Deployment

Partitionsverwaltung in Linux: Zeige deine Speicherbelegungen an

AUTOR • May 06, 2024
Backend

Entdecke das Kodachi: Die unsichtbare Klinge der Samurai

AUTOR • May 06, 2024
DevOps & Deployment

Linux-Befehle im Hintergrund ausführen: Eine umfassende Anleitung

AUTOR • May 06, 2024
DevOps & Deployment

Veeam Immutable Repository: Schutz Ihrer Daten vor Ransomware und Datenverlust

AUTOR • May 06, 2024
DevOps & Deployment

Die faszinierende Geschichte von Linux: Von bescheidenen Anfängen zur globalen Revolution

AUTOR • May 06, 2024
DevOps & Deployment

Digitale Nomaden: Ihr ultimativer Leitfaden für ein grenzenloses Leben

AUTOR • May 06, 2024
Backend

So richten Sie einen Webserver Schritt für Schritt ein

AUTOR • May 06, 2024
Frontend

HTML in E-Mails einbetten: Verbessern Sie Ihre E-Mail-Kommunikation

AUTOR • Apr 24, 2024
Frontend

CSS effektiv einbinden: Ein umfassender Leitfaden

AUTOR • Apr 24, 2024
Frontend

Anchor Links: Einfach erklärt und optimiert einsetzen

AUTOR • Apr 24, 2024
Frontend

Einfacher Einstieg: HTML-Webseiten erstellen für Anfänger

AUTOR • Apr 24, 2024