HTML ändern · Anleitung

HTML-Datei in PDF umwandeln

Die drei Schritte

1. HTML-Datei im Browser öffnen. Doppelklick genügt.
2. Strg+P drücken (Mac: Cmd+P).
3. Als Drucker „Als PDF speichern" wählen und speichern. Auf dem Mac steht die Option unten im Menü PDF.

Der eine Haken, den fast alle übersehen: Öffne im Druckdialog die weiteren Einstellungen und aktiviere „Hintergrundgrafiken" (Chrome/Edge) beziehungsweise „Hintergrundfarben und -bilder drucken" (Firefox). Ohne diese Option lässt der Browser alle farbigen Flächen weg — aus deinem gestalteten Workbook wird schwarzer Text auf weißem Grund. Das ist der Grund für „mein PDF sieht ganz anders aus als die Seite".

Warum kein Online-Dienst

Es gibt viele Seiten, die „HTML zu PDF" anbieten. Für eine Datei, die du ohnehin vor dir hast, lohnen sie nicht — und sie haben zwei echte Nachteile:

• Du lädst deinen Inhalt zu einem Fremden hoch. Bei einem Workbook mit Kundendaten oder einem unveröffentlichten Angebot ist das eine Entscheidung, die du bewusst treffen solltest.
• Das Ergebnis ist meist schlechter. Diese Dienste kennen deine Schriften nicht und ignorieren häufig genau die Druck-Regeln, um die es weiter unten geht.

Der Browser rendert die Seite mit derselben Engine, mit der er sie anzeigt. Das Ergebnis ist deshalb näher am Original als jeder Umweg.

Die CSS-Regeln, die aus dem PDF ein gutes PDF machen

Eine Webseite ist endlos lang, ein PDF hat Seiten. Diese Regeln überbrücken den Unterschied. Sie gelten nur beim Drucken und ändern nichts an der Seite im Browser:

@media print {

  /* 1. Ränder und Format der Seite */
  @page {
    size: A4;
    margin: 20mm;
  }

  /* 2. Was im PDF nichts zu suchen hat */
  .l-nav, .l-footer, .guide-cta, nav, video {
    display: none;
  }

  /* 3. Überschriften nicht allein am Seitenende */
  h1, h2, h3 {
    break-after: avoid;
  }

  /* 4. Zusammengehöriges nicht trennen */
  figure, table, .tldr, .hinweis {
    break-inside: avoid;
  }

  /* 5. Links lesbar machen */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }

  /* 6. Farben sparen, Lesbarkeit erhöhen */
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
}

Die fünfte Regel ist die klügste davon: In einem gedruckten PDF ist ein Link wertlos, weil niemand die Adresse sieht. Diese Zeile schreibt sie in Klammern dahinter.

Und Regel 3 löst das häufigste Ärgernis: eine Überschrift als letzte Zeile einer Seite, deren Text auf der nächsten beginnt. break-after: avoid schiebt sie mit.

Seitenumbruch selbst setzen

@media print {
  .neue-seite { break-before: page; }
}

<section class="neue-seite">
  <h2>Kapitel 2</h2>
</section>

Damit beginnt jedes Kapitel eines Workbooks auf einer neuen Seite. In älteren Anleitungen heißt die Eigenschaft page-break-before — die funktioniert weiterhin, break-before ist die aktuelle Schreibweise.

Wenn das PDF nicht so aussieht wie die Seite

Wofür das bei einem Workbook besonders zählt

Der häufigste Grund für diese Frage im Alltag von Selbstständigen: Ein Workbook, ein Freebie oder ein Kurs-Begleitmaterial liegt als HTML-Datei vor, soll aber als PDF an Kundinnen gehen — zum Ausdrucken oder zum Ausfüllen am Rechner.

Zwei Hinweise dafür:

• Ausfüllbare Felder werden leer. Ein PDF aus dem Browser enthält keine ausfüllbaren Formularfelder — es ist ein Abbild. Für Felder zum Eintragen brauchst du im Workbook Linien oder Kästen zum Reinschreiben mit der Hand, nicht HTML-Eingabefelder. Die erscheinen im PDF als leere Rahmen.
• Prüf die Umbrüche in der Vorschau. Eine Übung, die über zwei Seiten zerrissen wird, ist unbrauchbar. break-inside: avoid an den Übungsblöcken verhindert das.

Und ohne Code?

Ehrlich: PageFix wandelt nichts in PDF um. Es ist ein Editor für HTML-Seiten, kein Konverter. Das PDF machst du im Browser — und dafür brauchst du auch kein Werkzeug, es sind drei Tastenkombinationen.

Was PageFix in diesem Ablauf beiträgt, ist der Schritt davor:

Das ist die praktische Aufteilung: Druck-Regeln einmal einbauen lassen, danach den Inhalt beliebig oft per Klick ändern und jedes Mal frisch als PDF speichern. PageFix kostet einmalig 49 €, kein Abo.

Häufige Fragen

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen