HTML und CSS in PDF mit PHP: Komplette Anleitung mit Beispielen

Einleitung: Warum solltest du HTML in PDF umwandeln?

Stell dir vor: Du hast eine schöne Rechnung auf deiner Website erstellt, sie in HTML gestaltet, mit CSS formatiert – alles sieht perfekt aus. Doch der Kunde möchte die Rechnung als PDF. Oder du musst einen Bericht mit Diagrammen, Tabellen und komplexem Layout generieren. PDF manuell zu zeichnen, ist von gestern. Viel einfacher ist es, HTML+CSS zu schreiben und es dann programmatisch in ein PDF zu konvertieren.

Die Frage „How Can I add HTML And CSS Into PDF“ auf Stack Overflow hat tausende Aufrufe – das zeigt, wie relevant dieses Thema für viele Entwickler ist. In diesem Artikel zeigen wir dir die drei beliebtesten Methoden, um das mit PHP zu machen, präsentieren Codebeispiele und helfen dir, das beste Tool für deine Aufgabe auszuwählen.

Bibliotheken im Vergleich: Dompdf, TCPDF und mPDF

Bevor wir mit dem Code beginnen, schauen wir uns die Optionen an. Im PHP-Universum gibt es drei Hauptbibliotheken für die Konvertierung von HTML in PDF:

\n
• Dompdf – eine leichte Bibliothek, die CSS 2.1 und teilweise CSS 3 gut versteht. Ideal für einfache Dokumente.
\n
• TCPDF – leistungsstark und stabil, erfordert aber mehr Code für komplexe Layouts. Nicht sehr CSS-freundlich.
\n
• mPDF – die beste Wahl, wenn du komplexes CSS (Flexbox, Verläufe, Transparenz) benötigst. Die „CSS-freundlichste“ Bibliothek.
\n

In diesem Artikel konzentrieren wir uns auf mPDF als die bequemste Option, zeigen aber auch Beispiele mit Dompdf zum Vergleich.

Installation der Bibliotheken mit Composer

Zuerst erstellen wir ein Projekt und installieren die Abhängigkeiten. Öffne dein Terminal und führe folgenden Befehl aus:

composer require mpdf/mpdf

Wenn du Dompdf ausprobieren möchtest:

composer require dompdf/dompdf

Erstelle nun eine Datei generate_pdf.php im Projektverzeichnis und beginne mit dem Schreiben des Codes.

Beispiel 1: Einfaches HTML in PDF mit mPDF

Beginnen wir mit dem einfachsten Beispiel. Angenommen, wir haben eine HTML-Vorlage für eine Rechnung:

<!DOCTYPE html>\n<html>\n<head>\n    <style>\n        body { font-family: Arial, sans-serif; }\n        .invoice { max-width: 800px; margin: 0 auto; }\n        .header { background: #4CAF50; color: white; padding: 20px; }\n        .total { font-size: 24px; font-weight: bold; }\n    </style>\n</head>\n<body>\n    <div class="invoice">\n        <div class="header">Rechnung Nr. 123 vom 01.03.2025</div>\n        <p>Kunde: Max Mustermann</p>\n        <table border="1" width="100%">\n            <tr><th>Leistung</th><th>Preis</th></tr>\n            <tr><td>Webentwicklung</td><td>1.500,00 €</td></tr>\n            <tr><td>SEO-Optimierung</td><td>450,00 €</td></tr>\n        </table>\n        <div class="total">Gesamt: 1.950,00 €</div>\n    </div>\n</body>\n</html>

Und hier der PHP-Code zur PDF-Generierung:

<?php\nrequire_once __DIR__ . '/vendor/autoload.php';\n\n$html = file_get_contents('rechnung.html'); // oder einfach ein HTML-String\n\n$mpdf = new \\Mpdf\\Mpdf();\n$mpdf->WriteHTML($html);\n$mpdf->Output('rechnung.pdf', 'I'); // 'I' = im Browser anzeigen, 'D' = herunterladen\n?>

Führe das Skript aus – und schon ist das PDF fertig! Beachte: mPDF übernimmt automatisch das CSS aus dem <style>-Tag. Genau das ist die Antwort auf die Frage „How Can I add HTML And CSS Into PDF“ – übergib einfach HTML mit CSS an WriteHTML().

Beispiel 2: Arbeiten mit externen CSS-Dateien

Oft werden Styles in separaten Dateien gespeichert. mPDF unterstützt das Einbinden externer CSS-Dateien über <link>:

<?php\n$html = '\n<!DOCTYPE html>\n<html>\n<head>\n    <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n    <h1>Monatsbericht</h1>\n    <p>Dieser Bericht wurde automatisch generiert.</p>\n</body>\n</html>';\n\n$mpdf = new \\Mpdf\\Mpdf();\n$mpdf->WriteHTML($html);\n$mpdf->Output('bericht.pdf', 'D');\n?>