Im Rahmen eines Kundenprojekts hatten wir die Herausforderung, ein PDF in einem vorgegebenen Layout in einer Neptune-App zu generieren und zu versenden. Dies lässt sich relativ einfach per Cordova-Plugin realisieren.
Die besondere Herausforderung war, dass der Kunde die App nicht nur im Mobile Client nutzen wollte, sondern auch als Webversion im Browser. Im Browser stehen die Cordova-Plugins nicht zur Verfügung, also mussten wir uns eine alternative Möglichkeit zur PDF-Generierung überlegen.
Wir haben uns letzten Endes dafür entschieden, das JavaScript-Plugin jsPDF zu verwenden, da wir hiermit losgelöst von Neptune clientseitig ein PDF erzeugen können. Somit funktioniert diese Lösung auch in der Webversion im Browser des Kunden. Außerdem ist jsPDF ein Open Source Projekt und sehr gut dokumentiert, was die Anwendung natürlich erleichtert.
Der Vorteil dieses Plugins ist, dass man aus einem HTML-Code direkt ein PDF-Dokument erzeugen kann. Das war eine wichtige Anforderung, denn das PDF musste in einem bestimmten Layout erzeugt werden, das relativ aufwändig war.
Nachdem jsPDF als Skript im Neptune-Projekt eingebunden war, haben wir im ersten Schritt die Daten eines Formulars in einen HTML-String integriert. Der HTML-Code enthielt das gewünschte Layout. Hier waren sehr viele CSS-Anpassungen nötig, denn das Layout sollte auf jedem Endgerät identisch aussehen. Am Ende erhielten wir einen String, der aus HTML, CSS und den Formular-Daten bestand.
Der Kunde wollte in seiner Anwendung eine PDF-Vorschau inklusive Download-Möglichkeit bzw. Druck-Möglichkeit und einen Versand der PDF-Datei per E-Mail. Für die Vorschau haben wir im Mobile Client die Möglichkeiten des Cordova-Plugins cordova-pdf-generator genutzt, um z.B. auf einem Tablet das PDF anzuzeigen. In der Vorschau hat man dann die Möglichkeit, die Datei herunterzuladen oder auszudrucken.
In der Webversion der Anwendung haben wir für die Vorschau einfache Browser-Funktionen genutzt und den zuvor erzeugten HTML-String übergeben:
Der Versand der PDF erfolgte über eine API, die mit einem Server-Skript kommuniziert. Die PDF, die wir mit jsPDF generiert haben, musste in einen base64-String umgewandelt werden. Dieser String wurde zusammen mit einigen anderen Daten an das Server-Skript geschickt.
Das Server-Skript war dann für den E-Mail-Versand zuständig und hat den base64-String als Anhang der E-Mail hinzugefügt. Beim Empfänger kam dann eine gewöhnliche PDF in den E-Mail-Anhängen an.
Bei erfolgreichem Versand hat das Server-Skript per API wieder mit dem Frontend kommuniziert und es wurde eine Meldung über den erfolgreichen Versand angezeigt. Im Fehlerfall wurde eine Fehlermeldung angezeigt.
Zusammenfassend lässt sich sagen, dass jsPDF eine sehr gute Möglichkeit ist, wenn man eine Alternative zum Einsatz eines Cordova-Plugins sucht. Da man einen HTML-String in ein PDF umwandeln kann, ist man komplett frei in der Gestaltung des Layouts. Man braucht lediglich etwas Erfahrung im Umgang mit HTML und CSS, um ein perfekt designtes PDF zu erzeugen.