Während meines Vortrags bei den Seadays 2024 demonstrierte ich als Teil meiner Präsentation, wie ich in einem Projekt SeaTable als Backend zur Konfiguration von Daten wie Logo und Fußzeile einer PDF-Vorlage verwendete und versprach, weitere Informationen zu teilen. Mir wurde kürzlich bewusst, dass ich vergessen hatte, das Setup und den Workflow zu teilen. Entschuldigung, ich war etwas nervös und vergaß es niederzuschreiben. Hier ist also das versprochene Setup, ein paar Monate später.
Was ist Gotenberg?
Bevor wir uns in den Workflow vertiefen, lassen Sie mich kurz erklären, was Gotenberg für diejenigen ist, die möglicherweise nicht damit vertraut sind.
Gotenberg ist eine Docker-betriebene, zustandslose API zum Konvertieren von HTML, Markdown und Office-Dokumenten in PDF. Stellen Sie es sich als einen Webservice vor, der Ihr HTML (mit CSS) nimmt und ein ordnungsgemäß formatiertes PDF ausspuckt - keine komplexen PDF-Bibliotheken mehr oder Kämpfe mit Formatierungsproblemen.
Warum ist das nützlich? Nun, wenn Sie jemals versucht haben, PDFs programmatisch zu generieren, wissen Sie, dass es schmerzhaft sein kann. Gotenberg übernimmt die ganze schwere Arbeit für Sie. Sie senden einfach Ihr HTML über eine einfache HTTP POST-Anfrage, und es gibt ein schönes PDF zurück. Es verwendet Chrome unter der Haube, also sehen Ihre PDFs genau so aus, wie sie in einem Browser aussehen würden - das bedeutet, Ihr CSS funktioniert wie erwartet. Das Beste daran? Es ist völlig zustandslos, also können Sie es in einem Container ausführen, nach Bedarf skalieren, und es speichert nichts auf der Festplatte. Perfekt für Automatisierungs-Workflows wie das, was wir mit n8n erstellen.
Für dieses Tutorial verwende ich die Demo-Installation unter https://demo.gotenberg.dev/, aber ich würde dringend empfehlen, Ihre eigene Instanz für den produktiven Einsatz einzurichten. Es ist nur ein einfacher Docker-Container, also ist die Bereitstellung unkompliziert.
SeaTable Setup
Das SeaTable-Setup ist sehr einfach. Alles was Sie brauchen ist nur eine einzige Tabelle, nennen wir sie PDF Configuration und ein paar Spalten. (Oder laden Sie die SeaTable Base herunter und importieren Sie sie in Ihre SeaTable-Instanz).
Dies wird ähnlich wie ein Key/Value-Store behandelt, wo wir den Schlüssel (zum Beispiel Logo) und einen Wert (die Logo-Datei) haben.
Es hat auch zwei verschiedene Arten von Werte-Feldern, ein Value und Value Long. Der Grund dafür wird später detaillierter gezeigt, aber kurz gesagt, wenn Sie einen Wert wie einen Firmennamen oder eine Adresse haben, benötigen Sie höchstwahrscheinlich keine benutzerdefinierten Formatierungen, die SeaTable anbietet (fett, unterstrichen, Zeilenumbrüche etc.), also reicht ein normales Textfeld, da Sie nichts formatieren können oder Zeilenumbrüche in einem Textfeld in SeaTable haben können.
Wenn Sie jedoch mehr Text benötigen und Formatierung hinzufügen möchten - denken Sie an die Fußzeile einer Rechnung zum Beispiel - wo Sie Zeilenumbrüche, fetten Text etc. benötigen, dann ist das ein perfekter Anwendungsfall für das Value Long-Feld, wo Sie alle Formatierungsoptionen von SeaTable haben.
Man könnte argumentieren, dass Sie einfach das Value Long verwenden und nichts formatieren können. Aber hier ist die Sache. Benutzer werden das Textbereichsfeld sehen und anfangen, formatierten Text hinzuzufügen, und wenn Ihr Workflow in n8n das nicht behandelt, werden Sie einige sehr unerwartete Ergebnisse in Ihrem PDF haben, aber lassen Sie uns nicht vorgreifen und Schritt für Schritt vorgehen.
n8n Workflow
Mit dieser sehr einfachen SeaTable Base gehen wir zum n8n Flow. Beginnen wir mit den Grundlagen. Nehmen wir an, Sie versuchen, ein Rechnungssystem basierend auf SeaTable zu erstellen und verwenden n8n + Gotenberg, um das PDF zu erstellen.
Eine Rechnungsvorlage erstellen
Zuerst brauchen Sie eine Rechnungsvorlage. Für dieses Beispiel können Sie diese einfache Vorlage verwenden, um zu beginnen. Es ist nur statisches HTML, kein Logo, keine Platzhalter, nur HTML + CSS.
Ein erstes PDF erstellen
Importieren Sie den ersten Workflow vom GitHub-Repo, das wird so aussehen. Es verwendet die Demo-Installation von Gotenberg. Ich würde dringend empfehlen, dass Sie Ihr eigenes Gotenberg einrichten, aber der Demonstration halber verwenden wir die öffentliche Demo-Installation.
Lassen Sie es uns aufschlüsseln.
HTML zu Binärdaten
Die Rechnungsvorlage nimmt einfach das HTML aus der Rechnungsvorlage und speist es ohne Modifikationen zum nächsten Node, der es in eine Datei konvertiert. Der Grund, warum Sie das tun müssen, ist, dass Gotenberg eine Binärdatei als Formulardaten in einer POST-Anfrage erwartet, um das HTML in PDF zu konvertieren.
Alles was das tut, ist das HTML aus dem html-Eingabefeld zu nehmen und es als Binärdaten im data-Feld mit dem Dateinamen index.html zu speichern.
HTML in PDF konvertieren
Jetzt werden diese Binärdaten an den HTTP-Request-Node weitergegeben, der eine HTTP POST-Anfrage an Gotenberg sendet.
Hier müssen Sie die URL https://demo.gotenberg.dev/forms/chromium/convert/html definieren und den Body als Form-Data mit den zuvor erstellten Binärdaten senden.
Gotenberg gibt dann ein PDF zurück, das Sie auch von n8n herunterladen könnten. Soweit so gut, aber … das ist etwas langweilig und nicht ganz das Ziel dieses Posts. Babyschritte … ein Schritt nach dem anderen, ich komme dahin.
Das Logo hinzufügen
Bevor Sie tatsächlich das Logo hinzufügen können, müssen Sie n8n mit SeaTable verbinden, und dafür benötigen Sie einen API-Schlüssel von SeaTable.
Die API vorbereiten
Einen API-Schlüssel in SeaTable erstellen
Um einen API-Schlüssel zu erstellen, gehen Sie zur Base → Erweitert → API Token
Geben Sie ihm einen Namen und klicken Sie auf Submit. Wenn Sie nicht beabsichtigen, etwas in SeaTable zu schreiben, können Sie auch die Berechtigung auf Read-Only setzen.
Nehmen Sie jetzt den API-Schlüssel; wir fügen ihn zu n8n hinzu, wenn wir zum SeaTable-Node kommen.
Den Schlüssel zu n8n hinzufügen
Fügen Sie einen SeaTable-Node in Ihren n8n-Workflow mit der Zeilen-Aktion Search a row by keyword hinzu
Erstellen Sie eine neue Berechtigung
Fügen Sie hier Ihren SeaTable-API-Schlüssel ein
Das sollte nach dem Speichern bestätigen, dass alles einwandfrei funktioniert.
Nach dem Logo suchen
Sagen Sie Ihrem SeaTable-Such-Node, dass er nach einem Schlüssel namens logo in der Tabelle PDF Configuration suchen soll. Wenn Sie es ausführen, werden Sie etwas wie das hier sehen, das auch eine URL für das Logo enthält. Großartig!
Nun … fast, denn diese URL funktioniert, wenn Sie bei SeaTable angemeldet sind, ist aber nicht öffentlich zugänglich, was bedeutet, dass Gotenberg auch nicht darauf zugreifen kann.
Eine öffentliche URL für das Logo erstellen
Um auf das Logo von Gotenberg oder jeder anderen öffentlichen Ressource zugreifen zu können, müssen Sie den SeaTable-Node Get the public URL from asset path ausführen.
Bitte beachten Sie, dass sobald Sie eine öffentliche URL erstellt haben, diese öffentlich ist. Das bedeutet, JEDER, der die URL kennt, kann darauf zugreifen und es gibt keinen n8n-Node, um einen öffentlichen Link zu entfernen! Also behalten Sie das im Hinterkopf.
Rufen Sie diesen Node mit dem path vom Such-Node auf; Sie müssen den Pfad und nicht die URL verwenden!
Sobald ausgeführt, erhalten Sie eine Download-URL, mit der Sie, und Gotenberg übrigens auch, auf das Logo zugreifen können.
Dies kann jetzt in der HTML-Vorlage verwendet werden, um das Logo einzufügen. Also kommen wir jetzt dazu.
Das Logo zum HTML hinzufügen
Holen Sie sich die neue Vorlage aus dem HTML-Repo, die im Grunde nur die Zeile für das Logo zusätzlich zur vorherigen Vorlage enthält, einschließlich einiger hässlicher Inline-Stile, um sicherzustellen, dass das Logo nicht die ganze Seite füllt.
<img src="{{ $json.download_link }}" style="width: 100%; max-width: 300px">
damit das aus dem Weg ist, lassen Sie uns das PDF erstellen und den kompletten Workflow überprüfen.
Endlich ein PDF mit einem Logo
Das PDF enthält jetzt das Logo
Der Rahmen drum herum ist unschön, aber das ist kein Tutorial über das Design schöner Rechnungen, also wird es für dieses Beispiel reichen.
Der vollständige Logo-Workflow
Der “vollständige Workflow” klingt, als wäre es etwas wirklich Komplexes, aber wenn Sie sich den Workflow ansehen, können Sie sehen, wie einfach er ist und warum n8n dafür so großartig ist.
Alles was in diesem Workflow geändert wurde, ist der Inhalt der Rechnungsvorlage und die zwei Nodes, um das Logo und die öffentliche URL für das Logo zu holen.
Wie wäre es mit etwas Text hinzufügen?
Warum nicht mit dieser Vorlage weitermachen? Ich zeige Ihnen, wie Sie die Value- und Value Long-Felder ebenfalls verwenden.
Der Demonstration halber nehmen wir einfach an, die E-Mail Ihres Unternehmens sollte konfigurierbar sein.
Neue Konfiguration in SeaTable hinzufügen
Gehen Sie zur PDF-Konfiguration in SeaTable und fügen Sie eine neue Zeile mit der E-Mail hinzu.
Ihre Konfiguration sollte jetzt so aussehen:
Diese Konfiguration von n8n abrufen
Alles was Sie dafür brauchen, ist ein neuer Such-Node und die Suche nach dem email-Schlüssel.
Aktualisieren Sie Ihre Vorlage, um die E-Mail zu enthalten
und Sie sind fertig 🎉. Sie haben erfolgreich die E-Mail aus der SeaTable-Konfiguration in das PDF eingefügt.
Sie können die neue Rechnungs-HTML-Rechnung aus dem Repo erhalten Sowie den neuen Workflow, der jetzt so aussieht:
Schön. Immer noch einfach und leicht, und es ist bereits konfigurierbar und erweiterbar.
Was ist mit den Value Long-Werten?
Formatierten Text hinzufügen
Jetzt zum letzten Teil dieses Tutorials: formatierten Text zur Vorlage hinzufügen. Für dieses Beispiel gehen wir die Bankdaten an und machen sie in SeaTable konfigurierbar:
Bank-Konfiguration zu SeaTable hinzufügen
Zuerst korrigieren wir einen Fehler in der SeaTable-Tabelle. Das Value Long-Feld wurde versehentlich als Text-Feld anstelle von Long Text erstellt
Gehen Sie zur Spaltenkonfiguration → Spaltentyp anpassen
Und ändern Sie es zu Long Text
Jetzt können Sie den formatierten Text zu SeaTable hinzufügen
Warum jemand den Banknamen kursiv schreiben würde, ist mir unbegreiflich, aber hey, ich urteile nicht.
Die neue Konfiguration abrufen
Jetzt wieder, fügen Sie einen Such-Node hinzu und suchen Sie nach dem Schlüssel bank_details, was Ihnen die formatierten Daten für das PDF gibt, jedoch ist diese Formatierung in Markdown und wir brauchen HTML.
Markdown zu HTML konvertieren
Glück für Sie, n8n kommt mit einem Markdown-zu-HTML-Node
Es gibt noch eine Sache, die ich nicht ganz mag, etwas, womit ich in der Vergangenheit Probleme hatte. Ich mag die doppelten Zeilenumbrüche nicht, die von SeaTable kommen, und hatte auch Probleme mit unsichtbaren Leerzeichen oder escapten @-Zeichen. Das ist einfach mit nur ein wenig JavaScript zu lösen.
Anstatt {{ $json['Value Long'] }} verwenden Sie {{ $json['Value Long'].replaceAll(/ /g, ' ').replaceAll(/\n\n/g, '\n').replaceAll(/\\@/g, '@') }}, was sich um das Ersetzen dieser Vorkommnisse kümmert.
Es zur HTML-Vorlage hinzufügen
Alles was Sie jetzt tun müssen, ist diesen formatierten Text zur HTML-Vorlage hinzuzufügen. Entfernen Sie den statischen Text aus der HTML-Vorlage und fügen Sie die Daten vom Markdown-Konvertierungs-Node ein. (oder laden Sie einfach das neue HTML aus dem Repo herunter)
Und schauen Sie sich das an, die formatierten Daten sind auf dem PDF.
Abschließende Gedanken
Bevor Sie jetzt losgehen und das in der Produktion implementieren, lassen Sie mich ein paar Dinge ansprechen. Dieser Workflow ist absichtlich einfach, um die Kernfunktionalität der Verbindung von SeaTable mit n8n und Gotenberg zu demonstrieren. In einem realen Szenario würden Sie wahrscheinlich einige Verbesserungen vornehmen wollen. Zunächst, wenn Sie viele Konfigurationselemente haben, kann das Hinzufügen eines separaten Such-Nodes für jeden Ihren Workflow wie ein verworrenes Durcheinander aussehen lassen. Sie könnten das optimieren, indem Sie alle Konfigurationsdaten in einem einzigen Aufruf abrufen und sie dann verarbeiten, oder indem Sie ein ausgefeilteres Lookup-System erstellen. Aber für dieses Tutorial machen mehrere Such-Nodes es leichter zu verstehen, was bei jedem Schritt passiert. Auch hat dieses Beispiel absolut keine Fehlerbehandlung. Was passiert, wenn der Logo-Schlüssel nicht in SeaTable existiert? Was wenn die API down ist? Was wenn die Bilddatei beschädigt ist? In einem Produktions-Workflow würden Sie ordnungsgemäße Fehlerbehandlung, Fallback-Werte und vielleicht etwas Validierung hinzufügen wollen, um sicherzustellen, dass Ihre PDFs nicht kaputt gehen, wenn etwas schief geht. Das Ziel hier war nicht, ein kugelsicheres Produktionssystem zu erstellen, sondern Ihnen zu zeigen, wie diese drei Tools zusammenarbeiten und Ihnen eine Grundlage zum Aufbauen zu geben. Sobald Sie die Grundlagen verstehen, können Sie alle Schnörkel und Pfeifen hinzufügen, die Ihr spezifischer Anwendungsfall erfordert. Also nehmen Sie das als Ausgangspunkt, nicht als Ziellinie. Frohes Automatisieren! 🚀
Brauchen Sie Hilfe mit n8n?
Wenn Sie Ihr Automatisierungsspiel verbessern möchten oder Hilfe bei der Implementierung von Workflows wie diesen in Ihrem Unternehmen brauchen:
- n8n Training - Lernen Sie selbst, mächtige Automatisierungs-Workflows zu erstellen
- Beratungsdienstleistungen - Lassen Sie uns Ihnen helfen, Ihre Geschäftsprozesse zu automatisieren
Kontaktieren Sie uns, wenn Sie diese repetitiven Aufgaben in automatisierte Workflows verwandeln möchten, die 24/7 laufen!
Der komplette Workflow
