Kategorien

HTML zu PDF (Präzises Layout)

HTML/CSS zu PDF mit präzisen Kopf-/Fußzeilen und Druckoptionen

Dieses Tool rendert HTML/CSS mit einem Headless-Browser zu PDF für ein präzises Layout.

Kopf- und Fußzeile:

  • Eigene HTML-Templates
  • <span class="pageNumber"></span> und <span class="totalPages"></span> für Seitenzahlen
  • Inline-CSS in Kopf/Fußzeile

Druckoptionen:

  • A4/Letter/Legal
  • Ränder (mm)
  • Hintergrund drucken und Skalierung
  • @page und @media print Unterstützung ("CSS-Seitengröße bevorzugen")

Wichtige Fakten

Kategorie
Document Tools
Eingabetypen
textarea, select, checkbox, number
Ausgabetyp
file
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Dieses Tool konvertiert HTML und CSS in PDF-Dokumente mit präziser Steuerung über Layout, Kopf- und Fußzeilen sowie Druckeinstellungen. Es verwendet einen Headless-Browser, um ein druckfertiges Format mit hoher Wiedergabetreue zu generieren.

Wann verwenden

  • Wenn Sie PDFs mit benutzerdefinierten Kopf- und Fußzeilen und automatischen Seitenzahlen erstellen müssen.
  • Wenn Sie spezifische Druckeinstellungen wie Seitengröße, Ränder oder Hintergrunddruck für professionelle Dokumente benötigen.
  • Wenn Sie HTML-Inhalte in ein druckfertiges PDF-Format mit präzisem Layout und CSS-Unterstützung umwandeln möchten.

So funktioniert es

  • Geben Sie Ihren HTML-Inhalt und optionales benutzerdefiniertes CSS ein.
  • Konfigurieren Sie Druckoptionen wie Seitengröße, Ränder, Kopf-/Fußzeilen-Templates und Skalierung.
  • Das Tool rendert den Inhalt mit einem Headless-Browser und generiert eine PDF-Datei basierend auf Ihren Einstellungen.
  • Optional können Sie Wartezeiten, Medientypen und CSS-Seitengröße bevorzugen, um die Rendergenauigkeit zu optimieren.

Anwendungsfälle

Erstellung von Geschäftsberichten oder Präsentationen mit firmenspezifischen Kopfzeilen und Seitenzahlen.
Generierung von Rechnungen, Verträgen oder Formularen im PDF-Format mit präzisen Rändern und Layout.
Konvertierung von Online-Dokumentation, Handbüchern oder Webinhalten in druckfertige PDFs für die Archivierung.

Beispiele

1. Monatlicher Geschäftsbericht mit Seitenzahlen

Hintergrund
Ein Unternehmen erstellt monatliche Berichte in HTML und benötigt ein PDF mit Logo in der Kopfzeile und fortlaufenden Seitenzahlen.
Problem
Manuelle PDF-Erstellung ist zeitaufwendig und führt zu inkonsistenten Formatierungen.
Verwendung
HTML-Inhalt mit Berichtsdaten eingeben, CSS für Styling hinzufügen, und ein Kopfzeilen-Template mit <span class="pageNumber"></span> konfigurieren.
Beispielkonfiguration
<div style="font-size:10px; width:100%; text-align:center;">Firmenlogo | Seite <span class="pageNumber"></span> von <span class="totalPages"></span></div>
Ergebnis
Ein professionelles PDF mit konsistentem Layout, automatischen Seitenzahlen und druckoptimierten Einstellungen im A4-Format.

2. Rechnung im A4-Format mit Hintergrunddruck

Hintergrund
Ein Freelancer stellt Rechnungen aus HTML-Vorlagen aus und benötigt ein standardisiertes PDF mit Hintergrundgrafiken.
Problem
Unterschiedliche Druckeinstellungen führen zu fehlenden Hintergründen und ungleichmäßigen Rändern.
Verwendung
Rechnungs-HTML eingeben, Seitengröße auf A4 setzen, Ränder auf 15 mm anpassen und "Hintergrund drucken" aktivieren.
Ergebnis
Eine saubere, druckfertige Rechnung im A4-Format mit allen Hintergrundgrafiken und präzisen Rändern.

Mit Samples testen

html, pdf

Verwandte Hubs

FAQ

Welche Seitengrößen unterstützt das Tool?

Es unterstützt A4, Letter, Legal und A5 sowie benutzerdefinierte Ränder in Millimetern.

Wie füge ich Seitenzahlen in Kopf- oder Fußzeilen hinzu?

Verwenden Sie <span class="pageNumber"></span> für die aktuelle Seite und <span class="totalPages"></span> für die Gesamtseitenzahl in Ihrem HTML-Template.

Kann ich Hintergrundbilder oder -farben im PDF drucken?

Ja, aktivieren Sie die Option "Hintergrund drucken", um CSS-Hintergründe im PDF zu berücksichtigen.

Was bewirkt die Option "CSS-Seitengröße bevorzugen"?

Diese Option verwendet die Seitengröße, die in CSS mit @page definiert ist, anstelle der manuellen Seitengrößeneinstellung.

Wie kann ich die Darstellung bei langsamen Ladezeiten anpassen?

Passen Sie die "Zusätzliche Wartezeit" in Millisekunden an oder wählen Sie eine andere "Warten bis"-Option wie networkidle0.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/html-to-pdf-precise

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
htmlContent textarea Ja -
cssContent textarea Nein -
pageSize select Nein -
landscape checkbox Nein -
printBackground checkbox Nein -
scale number Nein -
marginTop number Nein -
marginBottom number Nein -
marginLeft number Nein -
marginRight number Nein -
headerTemplate textarea Nein -
footerTemplate textarea Nein -
mediaType select Nein -
waitUntil select Nein -
waitTime number Nein -
preferCssPageSize checkbox Nein -

Antwortformat

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Datei: Datei

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu:

{
  "mcpServers": {
    "elysiatools-html-to-pdf-precise": {
      "name": "html-to-pdf-precise",
      "description": "HTML/CSS zu PDF mit präzisen Kopf-/Fußzeilen und Druckoptionen",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=html-to-pdf-precise",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]