# HTML/CSS zu druckfertigem PDF

Setzt ein mehrseitiges, druckfertiges PDF direkt aus HTML und CSS: @page-Größe und -Ränder, laufende Kapitelüberschriften, Seitenzähler, Schnitt- und Passermarken, Beschnitt.

> Kanonische Seite: https://elysiatools.com/de/tools/pdf-typesetting-html-css-nojs-print

- **Kategorie:** Document Tools

- **Schlagwörter:** html zu pdf, css paged media, pagedjs, page css, schnittmarken, beschnitt, randboxen, laufender kopf, seitenzähler, druckfertiges pdf, satz, paginierung, print css, chromium druck

## Überblick

Ein CSS-Paged-Media-Setzer: Leg ihm ein in sich geschlossenes HTML-Dokument vor, dessen CSS den Druckentwurf trägt, und es rendert ein paginiertes, druckfertiges PDF — der Workflow „LaTeX-Qualität aus HTML“, ganz ohne JavaScript im Dokument. Die Engine lädt deine Datei im headless Chromium im Print-Medienmodus und druckt mit Seitengröße aus dem CSS und aktivierten Hintergründen. Zwei Engines: Standard ist Paged.js, das MIT-lizenzierte W3C-Paged-Media-Polyfill, das abdeckt, was Browser nicht können — Schnitt- und Passermarken (die Eigenschaft marks), Beschnitt, laufende Köpfe und Füße über Randboxen wie @top-center mit Kapiteltiteln per string-set, page- und pages-Zähler, benannte Seiten, generierte Inhalte für Listen und Fußnoten — es zerlegt deinen Inhalt in feste Seitenboxen und zeichnet die Marken außerhalb der Beschnittlinie. Natives Chromium ist die Rückfallebene: Chrome 131+ implementiert @page-Größen, -Ränder und alle sechzehn Randboxen nativ, was viele Entwürfe abdeckt, doch das Marken-Rendering ist begrenzt — deshalb existiert das Polyfill. Mit Auto wird Paged.js gewählt, solange das mitgelieferte Polyfill verfügbar ist, sonst nativ. Praxis: Das Dokument muss in sich geschlossen sein (Inline-Styles, Data-URI-Bilder), die Engine macht keine Netzwerkzugriffe; @page size akzeptiert jede CSS-Länge oder benannte Größe plus landscape; die PDF-Seitenbox wächst um den Beschnitt, damit Marken und Beschnitt außerhalb der Schnittkante liegen — druckereifert; komplexe Schriften werden mit den Systemfonts des Renderhosts gesetzt. Die Metadaten festhalten die genutzte Engine und die von Paged.js gesetzte Seitenzahl, damit du die Paginierung vor dem Druck prüfen kannst.

## Eingaben

- **HTML-Dokument** (file)
- **Zusätzliches CSS (optional)** (file)
- **Layout-Engine** (select)

## Wann verwenden

- Wenn mehrseitige Drucksachen wie Broschüren, Bücher oder Handbücher mit Beschnitt und Schnittmarken druckereifert vorbereitet werden müssen.
- Wenn automatisierte Reports und Datenblätter konsistente Kopf- und Fußzeilen mit dynamischen Seitenzählern und Kapiteltiteln erfordern.
- Wenn hochwertige PDF-Publikationen direkt aus HTML und modernem Print-CSS ohne manuelle Desktop-Publishing-Software generiert werden sollen.

## Funktionsweise

- Ein in sich geschlossenes HTML-Dokument mit Inline-Styles oder separater CSS-Datei hochladen und die gewünschte Layout-Engine festlegen.
- Die Engine berechnet den Seitenumbruch, baut Randboxen für Kopf- und Fußzeilen auf und platziert bei Bedarf Schnittmarken im erweiterten Beschnittbereich.
- Ein headless Chromium rendert die Seiten im Print-Modus inklusive Hintergrundfarben und exportiert das druckfertige PDF.

## Anwendungsfälle

- Druckfertige Buch- und Magazinlayouts mit Kapiteltiteln per string-set und sichtbaren Schnittmarken.
- Automatisierte Geschäfts- und Finanzberichte mit fortlaufender Paginierung und formalen Randboxen.
- Produktkataloge und Datenblätter mit festen DIN-Formaten und Randabfall-Grafiken.

## Häufig gestellte Fragen

### Warum müssen Grafiken und Stile lokal im Dokument eingebettet sein?

Der Konverter führt aus Sicherheitsgründen keine externen Netzwerkabfragen aus, weshalb Bilder als Data-URI und CSS-Stile inline oder als Datei übergeben werden müssen.

### Was unterscheidet Paged.js vom nativen Chromium-Rendering?

Paged.js implementiert über ein Polyfill Schnittmarken, Passerkreuze und Beschnitt, während natives Chromium moderne @page-Randboxen ohne standardisierte Schnittmarken ausgibt.

### Wie wirkt sich die Beschnittzugabe auf die PDF-Seitengröße aus?

Die PDF-Seitenbox wächst automatisch um den definierten Beschnitt, damit Schnitt- und Passermarken außerhalb des Endformats sichtbar bleiben.

### Können externe Web-Schriften verwendet werden?

Nein, Schriften müssen entweder als Base64 im CSS eingebettet sein oder auf dem rendernden System als Schriftart installiert vorliegen.

### Wann sollte die Engine-Einstellung „Auto“ gewählt werden?

„Auto“ nutzt standardmäßig das Paged.js-Polyfill für den vollen Funktionsumfang und weicht nur bei Nichtverfügbarkeit auf natives Chromium aus.

## Ähnliche Tools

- [HTML-zu-PDF-Renderer](https://elysiatools.com/de/tools/html-to-pdf-renderer): Rendert einen HTML-Teilumfang zu PDF
- [PDF-Kopf-/Fußzeilen-Bausteine](https://elysiatools.com/de/tools/pdf-header-footer-snippets): Konvertiert HTML zu PDF und fügt Logo-, Titel- und Datumsbausteine hinzu
- [E-Mail-HTML zu PDF](https://elysiatools.com/de/tools/libreoffice-html-mail-to-pdf): Rendert E-Mail-HTML zu PDF und erhalt die grundlegende Formatierung
- [Markdown-zu-PDF-Theme-Paket](https://elysiatools.com/de/tools/markdown-to-pdf-theme-pack): Konvertiert Markdown zu PDF mit Hell-, Dunkel- oder Druckthema
- [PDF-Tabellenextraktor zu CSV/JSON](https://elysiatools.com/de/tools/pdf-table-extractor-to-csv-json): Extrahiert Tabellen aus PDFs mit OpenDataLoader und exportiert sie als JSON, CSV oder HTML
- [PDF zu PowerPoint](https://elysiatools.com/de/tools/pdf-to-powerpoint): Extrahiert Textinhalt aus PDF-Dateien und konvertiert ihn in PowerPoint-Präsentationsfolien
- [PDF zu Text Erweitert](https://elysiatools.com/de/tools/pdf-to-text-advanced): Erweiterter PDF-zu-Text-Konverter mit Seitenauswahl, Formatierungsoptionen und Metadatenextraktion
- [OCR-PDF-zu-strukturiertes-JSON-Brücke](https://elysiatools.com/de/tools/ocr-pdf-to-structured-json-bridge): Extrahiert die PDF-Textebene mit Geometrie (Zeilen nach y-Position, Tabellen nach Spaltenlücken, Überschriften nach Schriftgröße, Doppelpunkt-Schlüsselwerte) und füllt Feld für Feld ein benutzerdefiniertes JSON Schema — Labels werden über normalisierte Schlüssel gepaart, Werte zu deklarierten Typen konvertiert und mit ajv validiert.

## Beispiele

- [PDF-Beispiele](https://elysiatools.com/de/samples/pdf-samples): Generierte PDF-Beispiele von Tools zwischen 2026-02-01 und 2026-02-10
- [Markdown Foliensatz Beispiele](https://elysiatools.com/de/samples/md-slide-deck-to-pdf): Remark/Marp Markdown Decks zum Testen des PDF Exports
- [HTML mit Bildern Proben](https://elysiatools.com/de/samples/html-with-images): HTML-Quellcodeproben mit Bildern zum Testen der Extraktion
- [HTML-Beispiele](https://elysiatools.com/de/samples/html-viewer-samples): Beispieldateien fuer den Browser-basierten HTML-Viewer