WKHTMLTOPDF und chartist.js

Eine PDF-Datei aus einem guten HTML-Template zu generieren ist mit WKHTMLTOPDF nicht wirklich schwierig. Werden zudem aber Diagramme mit JavaScript in dieses Template gerendert, wird die Angelegenheit schon etwas kniffliger.

In unserem Beispiel wurde  chartist.js als Bibliothek für die Diagramme verwendet. Dem Internet zufolge ist die Kombination beider Komponenten möglich, da Chartist die Bilder als SVG ausgibt und WKHTML damit umgehen kann.
Dies braucht aber zusätzliche Konfiguration. Anderenfalls wird das Template einfach ohne Diagramme ausgegeben…

Voraussetzungen schaffen

Zuerst muss eine globale Funktion repariert werden:

Dazu dieses Snippet einfach in einem  <script> Tag vor allen anderen JavaScripts ausführen.

Größen justieren

Als nächstes muss sichergestellt werden, dass Chartist die Größen der generierten SVGs mit festen Werten angibt. Das SVG braucht  width und  height Attribute und Styles gleichermaßen:

Chartist sollte sich bereits automatisch darum kümmern. Anderenfalls muss dies in den Diagramm-Optionen angepasst werden.
Um wirklich sicher zu gehen, können dieselben Attribute auch dem Umgebenden Tag zugeteilt werden.

WKHTML einrichten

Zuletzt muss WKHTMLTOPDF mitgeteilt werden, dass wir JavaScript ausführen. Denn auf diese Scripts muss gewartet werden!

Mit  --javascript-delay 1000 warten wir eine zusätzliche Sekunde auf das ausführen von JavaScript Code und mit  --no-stop-slow-scripts sind wir auf der sicheren Seite, wenn doch mal ein Script etwas länger benötigt.

Alternatives Warten

Statt auf das JavaScript direkt zu warten, könnte man auch auf ein Kommando reagieren. Die Dokumentation von WKHTML enthält ein Flag  --window-status <windowStatus>, das es erlaubt, auf eine Statusänderung des JavaScript-Window zu lauschen.

Würde also warten, bis

eingetreten ist, bevor die Seite in das PDF übertragen wird. So könnte man direkt auf ein  onComplete-Event reagieren und bräuchte keine statischen Wartezeiten.

Dieser Ansatz ist bisher nicht getestet, sondern nur eine Idee!

Kommentar hinterlassen

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