html2pdf : PDF erstellen mit PHP

html2pdf : PDF erstellen mit PHP

html2pdf : PDF erstellen mit PHP 5/5 (8)

Einfach per Mausklick aus einem HTML Dokument ein PDF erstellen? Klingt einfach, ist es auch, wenn man die richtige Bibliothek verwendet und die Tricks dazu kennt.

Schöne Webseiten sind eine Sache, daraus ein Reporting Tool zu machen eine ganz andere. Meist besteht der Anspruch, die Daten auch offline zur Verfügung zu stellen, und das plattformunabhängig. Was eignet sich da besser als ein PDF? Und natürlich soll die PDF Erstellung auch AJAX basiert ablaufen.

Zunächst brauchen wir die PHP Library html2pdf (html2pdf). Voraussetzung ist PHP 5.2 – das sollte aber mittlerweile auf jedem Webserver vorhanden sein. Die heruntergeladene ZIP Datei entpacken wir und speichern die Daten in einem vom Webserver erreichbaren Verzeichnis. Ich speichere Bibliotheken immer in dem Verzeichnis /lib, also in diesem Fall /lib/html2pdf.

Dann erstellen wir die PHP Datei, die via AJAX Request aufgerufen werden soll: /lib/html2pdf/pdf_engine.php

Ich setze schon standardmäßig die Zeitzone (sollte ich sie später brauchen). Außerdem binden wir die html2pdf Klasse ein;

date_default_timezone_set('Europe/Berlin');
require_once(dirname(__FILE__) . "/html2pdf.class.php");

Die Daten, die wir später in das PDF Dokument schreiben wollen, werden mittels POST Methode übergeben, ebenso wie der Titel:

$title = trim($_POST["title"]);
$data = trim($_POST["data"]);

Gehen wir davon aus, dass die Daten in einem einwandfreien HTML formatiert sind.

Jetzt setzten wir Kopf- und Fußzeile und die Seitenzahlen. Hierfür verwendet man <page>, <page_header> und <page_footer>. Darunter kommt dann der im HTML formatierte Inhalt

<page backtop=\"15mm\" backbottom=\"15mm\">
    <page_header>
        <table style=\"border-bottom: 1px solid #000; width: 100%; padding-bottom: 10px;\">
            <tr>
                <td width=\"640\">" . $title . "</td>
            </tr>
        </table>
    </page_header>
    <page_footer>
        <table style=\"border-top: 1px solid #000; width: 100%; padding-top: 10px;\">
            <tr>
                <td width=\"320\">&copy; " . date('Y') . " Webdesign Manching | Alle Rechte vorbehalten.</td>
                <td width=\"320\" style=\"text-align: right;\">Seite [[page_cu]] von [[page_nb]]</td>
            </tr>
        </table>
    </page_footer>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"pdf.css\">
    " . $data . "
</page>

Im <page> Tag geben wir den Abstand von 15mm für Kopf- und Fußzeile ein. Diese wiederholen sich auf jeder Seite. Header und Footer richte ich mit Tabellen aus, das hat sich bis dato am Besten bewährt, da CSS recht eingeschränkt ist. Apropos CSS. Man kann eine externe CSS Datei einbinden. Aber Achtung, es werden nicht alle CSS Eigenschaften verarbeitet (siehe html2pdf WIKI).




Den ganzen HTML Code schreiben wir in eine Variable, die wir dann die html2pdf Klasse übergeben. Zunächst müssen wir aber die Klasse initialiseren:

$html2pdf = new HTML2PDF("P","A4","de", true, "UTF-8", array(20, 10, 20, 10));

Die Parameter für den Konstruktor sind folgende:

  1. $sens: Landscape oder Portrait, also Quer- oder Hochformat
  2. $format: die Papiergröße, also A4, A5, usw.
  3. $language: die Sprache, z.B. ‚de‘ oder ‚fr‘
  4. $unicode: die Zeichen werden als UNICODE formatiert, und weil wir jede Menge Umlaute haben, setzen wir den Wert auf true
  5. $encoding: die Zeichenkodierung, UTF-8 ist für deutsche Texte ideal
  6. $marges: die Abstände zum Seitenrand (links, oben, rechts, untern)
$html2pdf->WriteHTML($html);

Mit der Funktion WriteHTML() geben wir der Klasse mit, was denn nun eigentlich zum PDF gemacht werden soll. Die Variable $html beinhaltet den oben beschriebenen HTML Code.

Was jetzt noch fehlt ist die Ausgabe der Datei. Da wir das Ganze via AJAX machen wollen, speichern wir das Dokument auf dem Server und geben nur den Link zum PDF zurück:

$filename = "D:/Websites/webdesign-manching.de/documents/" . (string)time() . ".pdf";
$html2pdf->Output($filename, "F");

Der Funktion Output kann man vier verschiedene Parameter nach dem Dateinamen mitgeben:

  1. I: Das PDF wird im Browser geöffnet
  2. D: Es wird ein Download Dialog angezeigt
  3. F: Die Datei wird auf dem Server abgespeichert
  4. S: Das PDF Dokument wird als String zurück gegeben

Die komplette Datei sieht dann so aus:

<?php

    // set the timezome
    date_default_timezone_set("Europe/Berlin");
    // load the PDF class
    require_once(dirname(__FILE__) . "/html2pdf.class.php");
    // get the title and data from POST
    $title = trim($_POST["title"]);
    $data = trim($_POST["data"]);
    // set the pdf content
    $html = "   <page backtop=\"15mm\" backbottom=\"15mm\">
                    <page_header>
                        <table style=\"border-bottom: 1px solid #000; width: 100%; padding-bottom: 10px;\">
                            <tr>
                                <td width=\"640\">" . $title . "</td>
                            </tr>
                        </table>
                    </page_header>
                    <page_footer>
                        <table style=\"border-top: 1px solid #000; width: 100%; padding-top: 10px;\"><tr>
                        <td width=\"320\">&copy; " . date('Y') . " Webdesign Manching | Alle Rechte vorbehalten.</td>
                        <td width=\"320\" style=\"text-align: right;\">Seite [[page_cu]] von [[page_nb]]</td>
                        </tr></table>
                    </page_footer>
                    <link rel=\"stylesheet\" type=\"text/css\" href=\"pdf.css\">
                    " . $data . "
                </page>";
    
    // load the HTML2PDF class
    $html2pdf = new HTML2PDF("P", "A4", "de", true, "UTF-8", array(20, 10, 20, 10));
    // create the document
    $html2pdf->WriteHTML($html);
    // send the document to the browser and force the download
    $path = "D:/Websites/webdesign-manching.de/documents/";
    $filename = (string)time() . ".pdf";
    $html2pdf->Output($path . $filename, "F");
    // return the filename to ajax request
    echo $filename;
    
?>

Somit wäre unser PDF erstellt und auf dem Server vorhanden. Mittels jQuery kann man jetzt z.B. auf einen Button einen EventHandler legen, der einen AJAX Request auf diese Datei erzeugt:

$( "#mybutton" ).click( function() {
    $.ajax({
        url: "/lib/html2pdf/pdf_engine.php",
        method: "post",
        data: { title: $( "#titel" ).text(), data: $( "#pdfdata" ).html() },
        success: function( filename ) {
            window.open( "/documents/" . filename );
        },
        error: function( error ) {
            console.error( error );
        }
    });
});


Hierbei werden die HTML Container mit der ID titel und pdfdata als Daten verwendet.

Und schon hat mein ein schönes PDF Dokument, in dem man auch wunderbar Bilder oder sein Logo einbinden kann.

 

Bitte bewerten Sie meinen Beitrag

Alexander Jungwirth ist Webentwickler bei einem Ingolstädter Verlagshaus und ist Inhaber der Firma Webdesign Manching. Seine Leidenschaft ist HTML, seine Passion PHP, seine Hingabe CSS und seine Inbrunst jQuery. Alexander lebt in Manching mit seiner liebevollen Frau und seinen wunderbaren Kindern.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.