HTML-Datei in ein PDF umwandeln — mit erhaltener Gestaltung
Vom FreePDF-Team ·
Eine .html-Datei weiterzugeben ist eine wackelige Sache. Auf dem Rechner, der sie erzeugt hat, sieht sie richtig aus, und dann kommt sie ohne ihr Stylesheet an, oder öffnet sich in einem Browser, der anders umbricht, oder wird als Anhang gleich blockiert. Ein PDF friert die Seite ein: eine Datei, überall dasselbe Layout, und der Ausdruck sieht aus wie der Bildschirm.
Was mitkommt und was nicht
Laden Sie die .html- oder .htm-Datei hoch. Sie wird so ins PDF gerendert, wie ein Browser sie für den Druck rendern würde. Drei Dinge sollten Sie vorher wissen:
- Das CSS in der Datei wird angewendet. Alles in einem
<style>-Block oder einemstyle=-Attribut kommt mit: Schriften, Farben, Rahmen, Tabellen, Hintergründe. - JavaScript läuft nicht. Die Seite wird so gerendert, wie sie in der Datei steht. Zeichnet ein Skript beim Laden ein Diagramm oder eine Tabelle, landet im PDF der leere Container, mit dem es angefangen hat.
- Relative Pfade lösen sich nicht auf. Eine hochgeladene Datei hat keine Adresse, zu der sie relativ sein könnte, also zeigt
<img src="images/logo.png">oder<link href="style.css">auf nichts. Absolutehttps://-URLs werden normal geladen.
Der Ausweg für den letzten Punkt ist eine Seite aus einer Datei: das CSS in einen <style>-Block kopieren und für Bilder entweder vollständige URLs verwenden oder sie als data:-URI einbetten. Die meisten Werkzeuge, die HTML-Berichte erzeugen — und „Seite speichern unter → einzelne Datei“ im Browser — machen das schon so.
Papierformat und Ränder steuern Sie über das CSS
Weil als Druckausgabe gerendert wird, gilt das Druck-CSS. Wenn Sie das HTML selbst erzeugen, kommen Sie mit wenigen Regeln weit:
@page { size: A4; margin: 20mm; }setzt Papierformat und Ränder. StattA4nehmen SieLetter, wenn das Ihr Format ist.break-before: pagean einer Überschrift beginnt jeden Abschnitt auf einem neuen Blatt.break-inside: avoidan einer Tabelle oder einer Box verhindert, dass sie über zwei Seiten zerschnitten wird.- Regeln in
@media printgreifen, also bleiben Navigation, Banner und alles andere, was Sie einem Drucker vorenthalten würden, aus dem PDF heraus.
Wann der Druckdialog des Browsers das bessere Werkzeug ist
Das sei deutlich gesagt, weil es oft die richtige Antwort ist: Wenn Sie eine lebende Webseite als PDF sichern wollen, öffnen Sie sie und drucken Sie sie als PDF. Der Browser hat die Seite schon geladen, mit ihren Bildern, mit ausgeführten Skripten und mit Ihrer Anmeldung — er erfasst also Dinge, die in einer hochgeladenen Datei gar nicht drinstehen.
Die Datei hier umzuwandeln ist der bessere Weg, wenn Sie eine selbstgenügsame .html auf der Platte haben: eine per Mail gekommene Rechnung, einen von einem Skript geschriebenen Bericht, den Export eines Programms, einen gespeicherten Kassenbeleg — und ein sauberes PDF wollen, ohne die Kopf- und Fußzeilen und Seitenzahlen, die der Browser an die Ränder stempelt. Es ist außerdem wiederholbar: dieselbe Datei ergibt jedes Mal und auf jedem Rechner dasselbe PDF, was ein Druckdialog voller rechnerindividueller Einstellungen nicht leistet.
Und wenn das Dokument erst geschrieben werden muss statt umgewandelt, umgeht Markdown das Problem komplett: kein CSS zu verwalten, keine Bilddateien hinterherzujagen.
Häufige Fragen
Kann ich eine URL angeben statt einer Datei?
Nein — umgewandelt wird eine Datei, die Sie hochladen. Speichern Sie die Seite erst (Strg+S / Cmd+S, mit der Option „einzelne Datei“, falls Ihr Browser sie anbietet) und laden Sie die dann hoch. Bei einer Seite hinter einer Anmeldung ist das Selbstspeichern ohnehin der einzige Weg, den Inhalt herauszubekommen.
Mein PDF ist ohne Gestaltung herausgekommen. Woran liegt das?
Fast immer an einem Stylesheet, das in einer eigenen Datei liegt. Das HTML verweist auf style.css, hochgeladen war nur das HTML, und damit gibt es nichts zu laden. Öffnen Sie die Datei in einem Texteditor, verschieben Sie das CSS in einen <style>-Block im <head>, und wandeln Sie erneut um.