Voraussetzungen
- Installiertes und konfiguriertes PDF-Plugin auf Ihrer Simplifier-Instanz (eine Installationsanleitung finden Sie in unserer Dokumentation). Wenn das PDF-Plugin aktiv ist, ist es in der Plugin-Listenübersicht verfügbar:
- Eine Benutzerrolle mit Berechtigungen zum Verwalten und Generieren von Vorlagen , die dem Benutzer zugewiesen ist, der mit dem PDF-Plugin arbeitet.
- Vorlagen verwalten berechtigt zum Erstellen/Bearbeiten und Löschen neuer PDF-Vorlagen.
- Vorlagen generieren gibt die Berechtigung, das Plugin für die PDF-Generierung zu verwenden .
Diese Berechtigung muss erteilt werden, um eine PDF-Datei innerhalb einer Anwendung zu erstellen.
Schritt 1 – Erstellen einer neuen Vorlage
Um eine neue Vorlage zu erstellen, gehen Sie einfach folgendermaßen vor:
- Rufen Sie die Benutzeroberfläche des PDF-Plugins auf, indem Sie im Hauptmenü auf den Eintrag “Plugins” klicken und dann in der Plugin-Listenübersicht auf den Eintrag “pdfPlugin” doppelklicken (siehe Screenshot oben)
- Drücken Sie die ‘+’-Taste
- Ändern des Namens der Vorlage
- Retten
Daraufhin wird Ihre Vorlage in der Vorlagenliste angezeigt. Zu diesem Zeitpunkt verfügt Ihre Vorlage über einige Standardinhalte.
Schritt 2 – Inhalte erstellen
Wenn nicht erwartet wird , dass Ihre Vorlage dynamische Daten anzeigt, die von einer Anwendung gesendet werden, können Sie Schritt 2.1 überspringen.
2.1 Hinzufügen von MockUp-Daten zur JSON-Vorschau
Da das PDF-Plugin zum Rendern von Daten aus Anwendungen konzipiert ist, fügen Sie einige Dummy-Daten ein, die den Daten ähneln, die Sie zum Generieren dieser Vorlage verwenden werden.
Beispiel:
{
"data": [
{
"articleNumber": 124578,
"price": "10,95 €",
"title": "DummyArticle1",
"available": true
},
{
"articleNumber": 789456,
"price": "21,50 €",
"title": "DummyArticle2",
"available": true
},
{
"articleNumber": 613376,
"price": "2,95 €",
"title": "DummyArticle3",
"available": false
}
]
}
2.2 HTML-Inhalt definieren
Eine PDF-Vorlage wird mit HTML-Code erstellt, um zu definieren, was angezeigt werden soll und wie es gelayoutet wird. Auf Werte aus den JSON-Daten kann über den Lenker zugegriffen werden.
2.2.1 Körper
Der Hauptteil der Vorlage sollte sich im Hauptteil der Vorlage befinden. Sie können HTML-Code verwenden, um die Struktur zu definieren und sich für das Styling auf CSS-Klassen zu beziehen (siehe Schritt 2.3).
Beispiel:
<h2> List of articles</h2>
<span>This is a list of articles.</span><br>
<span>The text is static content meaning it's rendered everytime the template is used to create a PDF</span>
<p>The following items are dynamic content meaning they're only rendered if the data is send to the PDF plugin when create a PDF</p>
<table>
<!--This part of the table is static-->
<tr class="tableHeader">
<td>Article number</td>
<td>Title</td>
<td>Price</td>
</tr>
<!--This part of the table is dynamic-->
<!--for every item in our JSON one row will be rendered-->
{{#data}}
<!--only if available == true of entry-->
{{#available}}
<tr>
<!--the value of every item is used and rendered-->
<td>{{articleNumber}}</td>
<td>{{title}}</td>
<td>{{price}}</td>
</tr>
{{/available}}
{{/data}}
</table>
2.2.2 Kopf- / Fußzeile
Wenn auf jeder Seite einer PDF-Datei eine Kopf- oder Fußzeile gerendert werden soll, können Sie den Inhalt in diesen beiden Registerkarten definieren. Wie im Hauptteil können Sie HTML und CSS verwenden, um den Inhalt zu definieren.
Derzeit gibt es eine Einschränkung: <! DOCTYPE html> muss vor jedem Inhalt eingefügt werden!
Beispiel:
<!DOCTYPE html> <hr> <span style="color: grey">My Company Name </span>
Wenn Sie Ihre Kopf-/Fußzeile dynamisch gestalten möchten, d.h. unterschiedliche Inhalte basierend auf der aktuellen PDF-Seite anzeigen möchten, können Sie HTML-Skripte verwenden, um die aktuelle Seite zu extrahieren und die Elemente innerhalb der Kopf-/Fußzeile ein-/auszublenden. In diesem Artikel zeigen wir Ihnen, wie Sie dies erreichen können: https://community.simplifier.io/knowledge/pdf-templates-make-the-header-footer-content-dynamic/
2.3 Styling Ihrer Vorlage
Mit CSS können Sie das Aussehen und den Stil Ihrer Vorlage definieren. Sie können auch Inline-Style-Tags in Ihrem HTML-Code verwenden (wie im obigen Beispiel zu sehen).
Beispiel:
table{
width: 100%;
}
.tableHeader{
background-color: #dedede;
}
Schritt 3 – Konfigurationen für das PDF
Das serverseitige Business Objekt ‘SF_PDF‘ verfügt über zwei Funktionen: ‘generate‘ und ‘generateWithConfig‘. Wenn Sie einfach nur Ihre Daten in einer PDF-Datei anzeigen möchten, reicht es aus, die Funktion “Generieren” zu verwenden. Wenn Sie jedoch einige Konfigurationen hinzufügen möchten, wie z. B. die Seitengröße oder die Seitenausrichtung, verwenden Sie ‘generateWithConfig’. ‘GenerateWithConfig’ verfügt über einen zusätzlichen Parameter: ‘configJSON’. In diesem Parameter können Sie Ihre Konfigurationen im JSON-Format festlegen.
Beispiel:
var oConfig = {
"orientation": "Landscape",
"page-size": "A4",
"margin-top": "1in",
"margin-bottom": "1in",
"margin-left": "1in",
"margin-right": "1in",
"footer-center": "[page] / [toPage]"
};
Häufig gestellte Fragen
F: Wie kann ich verhindern, dass meine Tabelle in der Mitte einer Zeile geteilt wird, wenn sie auf mehreren Seiten gerendert wird?
A: Um zu verhindern, dass eine Tabelle auseinandergerissen wird, können Sie das folgende CSS verwenden.
table, tr, td, th, tbody, thead, tfoot{
page-break-inside: avoid !important;
}
F: Wie kann ich einen Seitenumbruch nach einem bestimmten Element erzwingen?
A: Das Erzwingen eines Seitenumbruchs nach einem bestimmten Element erfolgt ebenfalls mithilfe von CSS. Kopieren Sie das folgende CSS, fügen Sie es in Ihre Vorlage ein und fügen Sie die Klasse zum gewünschten HTML-Element hinzu
.break-after{
page-break-after: always;
}
F: Ich möchte die Anzahl der Seiten in der Fußzeile haben. Wie kann ich das erreichen?
A: Dies kann mit der Funktionalität von WKHTMLTOPDF erfolgen. Werfen Sie einen Blick auf die verlinkte Dokumentationsdatei und suchen Sie nach “Fuß- und Kopfzeilen”. Es gibt ein Beispiel, das Sie einfach kopieren und einfügen können
Einschränkungen
PDF-Plugin-Vorlagen können nicht Teil eines Simplifier-Transports sein und müssen daher manuell transportiert werden.
