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

Kommentar hinterlassen

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