HTML nach in PDF konvertieren

Heute schauen wir uns mal an, wie wir eine Webseite bzw. HTML nach PDF konvertieren können. Mit Java-Script im Browser, ohne dass wir serverseitig irgendeine Software oder Script laufen lassen müssen.

Anwendungsgebiete gibt es jede Menge, dies kann eine Rechnung sein, welche als HTML-Dokument online erstellt wird und der Benutzer soll sich diese abspeichern könne. Oder ein HTML-Formular welches sich der Benutzer nicht nur drucken, sondern auch ausgefüllt als PDF abspeichern kann.

Die Umsetzung soll im Client erfolgen, mit Java-Script. Mittlerweile gibt es für alles eine Java-Script Bibliothek, so auch für unser Unterfangen: html2pdf.

Diese erlaubt es uns HTML nach PDF zu konvertieren. Die Bibliothek benötigt zwei weitere Bibliotheken: jsPDF und html2canvas.

Alles zusammengefasst gibt es am Ende dieses Artikels zum Download.

Legen wir los

In unserem Beispiel wollen wir ein HTML-Formular vom DA-FormMaker mit einer PDF-Funktion ausrüsten. Der Anwender kann so das Formular samt Inhalt als PDF abspeichern.

Zuerst müssen wir die Java-Script Bibliotheken in unsere HTML-Datei einbinden:

<script src="js/jspdf.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/html2pdf.min.js"></script>

Dies fügen wir im Head-Bereich ein. Im Beispiel liegen die Dateien im Unterordner js.

Jetzt gilt es den Inhalt festzulegen, welcher im PDF erscheinen soll. Dies muss nicht das gesamte HTML-Dokument sein, sondern wir können einen Bereich festlegen. Somit können wir z.B. Navigationsbereiche, Werbung und andere Dinge bewusst auslassen. Dazu fügen wir dem umschließenden div Element eine id hinzu:

<div class="w3-card-12 w3-white mainContainer" id="element-to-print">

Die id “element-to-print” werden wir gleich beim PDF-Druck angeben. Der Name ist frei wählbar, so dass wir verschiedene Druckbereiche definieren können. Kurz gesagt, alles was sich in dem Element befindet, wird ins PDF gedruckt.

Nun legen wir am Ende unserer HTML-Datei noch eine Funktion an, welche uns den Druck ausführen lässt:

<script>
function printPDF() {
  var element = document.getElementById("element-to-print");
  var opt = {
   margin:       1,
   filename:     'myfile.pdf',
   image:        { type: 'jpeg', quality: 0.98 },
   html2canvas:  { scale: 2 },
   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };
  html2pdf(element);
}
</script>

In der ersten Zeile holen wir uns die Referenz auf das Element, welches wir zuvor definiert haben. Anschließend legen wir die Optionen für das PDF fest, welche Optionen es hier gibt, kann man alles auf der Webseite der Komponente nachlesen. Hier können Einstellungen zum Papierformat, der Bildqualität, Dateiname etc. festgelegt werden.

Nun fügen wir noch einen Drucken Button hinzu:

<button type="button" onclick="printPDF();">PDF</button>

Dieser ruft einfach nur noch die Funktion auf. Das Ergebnis:

Klickt der Benutzer auf den Link, erscheint ein Download-Dialog und der Anwender kann das PDF abspeichern. In unserem Beispiel sieht das PDF so aus:

Das wars! Mit der Bibliothek können Sie recht schnell Druck- bzw. Konvertierfunktionen von HTML nach PDF umsetzen bzw. dem Benutzer anbieten. Technisch gesehen wird der Inhalt des Browsers in ein Canvas-Element bzw. Bild konvertiert, welches dann mit jsPDF in ein PDF-Dokument eingefügt wird. Der Nachteil ist, dass das PDF eine Art Screenshot der Webseite ist. D.h. Text ist am Ende kein kopierbarer Text im fertigen PDF. Ansonsten aber eine coole Lösung.

Download und Beispiel

Beispiel Formular | Download des Beispiels

4 Kommentare

  1. Beschreibung nicht zu gebrauchen wenn man Änderungen vornehmen will.
    Keine Erklärung der vielen hidden Formularelemente . Html des Formulars irgendwo auf dem Server…..
    Der Darsteller kann nix erklären. Diffus und unvollständig.

  2. Ich finde das Tutorial gut, allerdings ist die Qualität der PDF Datei sehr schlecht. Ich wollte ein Formular erstellen und nutze Bootstrap. Die PDF wird wunderbar erstellt. Aber in der PDF ansicht so wie wenn man das ganze ausdruckt sieht es leider nicht gut aus. Gibt es da vielleicht möglichkeiten die Qualität zu verbessern ? Hatte auch auf einer anderen Seite ein Tutorial gefunden. Das hat das ganze auch behandelt.

    Da ist die Qualität super, aber das Formular sieht nicht so aus wie auf der Webseite. Formatierung und teile fehlen.

    function download() {
    let pdf = new jsPDF(‘l’, ‘pt’, ‘a4’);
    pdf.html(document.getElementById(‘id’), {
    callback: function () {
    //pdf.save(‘test.pdf’);
    window.open(pdf.output(‘bloburl’)); // to debug
    }
    });
    }

    Das ist das was ich gefunden hatte. Quali gut, rest nicht 🙂

Schreibe einen Kommentar zu Thorsten K Antworten abbrechen

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