Simplifier Makers ClubSimplifier Makers Club
  • Docs
  • Wissensdatenbank
  • F.A.Q
  • Forum
  • Kurse
  • Marktplatz
  • Lizenzen
  • Login
  • Werde Mitglied im Club
  • Deutsch
  • Englisch
  • Try for free
  • Docs
  • Wissensdatenbank
  • F.A.Q
  • Forum
  • Kurse
  • Marktplatz
  • Lizenzen
  • Login
  • Werde Mitglied im Club
  • Deutsch
  • Englisch
  • Try for free
home/Wissensdatenbank/Plugins/PDF-Vorlagen: Gestalten Sie den Inhalt der Kopf-/Fußzeile dynamisch

PDF-Vorlagen: Gestalten Sie den Inhalt der Kopf-/Fußzeile dynamisch

Written by Jennifer Häfner
Juli 24, 2024

In diesem Artikel zeige ich Ihnen, wie Sie dynamische Inhalte im Kopf-/Fußbereich Ihrer PDF-Vorlage anzeigen können.
Dynamischer Inhalt bedeutet in diesem Zusammenhang, dass Sie je nach aktueller Seite des PDFs unterschiedliche Inhalte in der Kopf-/Fußzeile anzeigen können.

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 – Richten Sie die PDF-Vorlage ein

Zunächst benötigen wir eine PDF-Vorlage, die Daten auf mehreren Seiten anzeigt.
Um zu erfahren, wie Sie eine PDF-Vorlage im Detail erstellen, lesen Sie diesen Artikel, in dem wir diesen Prozess im Detail beschreiben: https://community.simplifier.io/knowledge/create-a-pdf-template-via-plugin/ In diesem Beispiel verwenden wir die PDF-Vorlage aus der FeedbackApp , die wir im Simplifier-Grundlagenkurs erstellen.
Sie finden die Daten aus dem Abschnitt Body/CSS/JSON unten.
Im JSON-Teil haben wir dem JSON-Objekt zwei Felder hinzugefügt: “materialnumber” und “date”.
Um eine PDF-Datei zu erhalten, die mehrere Seiten benötigt, fügen Sie einfach einige weitere Objekte zum Array ‘data’ hinzu (z. B. durch Kopieren/Einfügen der bereits vorhandenen Objekte).

Körper

<h2>Feedback</h2>
<table>
<tr>
<th>Date</th>
<th>Vote</th>
</tr>
{{#data}}
<tr><td>{{date}}</td><td>{{vote}}</td></tr>
{{/data}}
</table>

CSS

table{
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
td, th{
border: 1px solid black;
text-align: start;
padding: 0.25rem;
}
table * tr:nth-child(odd) {
background-color: #f3f3f3;
}
table * tr:first-child{
background-color: lightgrey;
}
@media print {
thead {display: table-row-group;}
}

JSON (Englisch)

{
"materialnumber": "123456789",
"date": "2023-02-06",
"data": [
{
"date": "2020-09-07 15:20:45",
"id": 1,
"vote": 2
},
{
"date": "2020-11-25 11:02:25",
"id": 2,
"vote": 3
},
{
"date": "2021-03-08 08:55:52",
"id": 3,
"vote": 4
},
{
"date": "2021-03-08 08:57:12",
"id": 4,
"vote": 4
},
{
"date": "2021-04-06 12:37:22",
"id": 5,
"vote": 3
},
{
"date": "2021-04-06 12:38:34",
"id": 6,
"vote": 4
},
{
"date": "2021-04-06 13:15:09",
"id": 7,
"vote": 2
}
]}

Erstellen Sie eine neue Vorlage, fügen Sie die entsprechenden Daten ein und speichern Sie.

Schritt 2 – Kopf-/Fußzeile hinzufügen

Um auf jeder generierten PDF-Seite eine Kopf-/Fußzeile anzuzeigen, fügen Sie einfach HTML-Code in den Kopf-/Fußbereich ein.
Hinweis: Sie müssen anhängen<! DOCTYPE html> als erstes Element im Code, zum Beispiel: <!DOCTYPE html>
<p>This is the header!</p>
oder  <!DOCTYPE html>
<p>This is the footer!</p>
Genau wie im Body-Abschnitt können Sie auf die Daten aus dem JSON-Objekt zugreifen und diese in der Kopf-/Fußzeile anzeigen: <!DOCTYPE html>
<p>Material Number: {{materialnumber}}</p>
<p>Date: {{date}}</p>
  An dieser Stelle werden die gleichen Daten als Kopf-/Fußzeile aller PDF-Seiten angezeigt.

Schritt 3 – Legen Sie die Kopf-/Fußzeile basierend auf der Seitenzahl fest

Nehmen wir nun an, wir möchten sowohl die Materialnummer als auch das Datum auf der ersten Seite der PDF-Datei anzeigen, aber auf den folgenden Seiten möchten wir nur die Materialnummer anzeigen.
Um dies zu erreichen, müssen wir mit einem Skript innerhalb des HTML-Headers arbeiten:

Kopfball

<!DOCTYPE html>
<html><head><script>
function initHeader() {
var vars = {};
var query_strings_from_url = document.location.search.substring(1).split('&');
for (var query_string in query_strings_from_url) {
if (query_strings_from_url.hasOwnProperty(query_string)) {
var temp_var = query_strings_from_url[query_string].split('=', 2);
vars[temp_var[0]] = decodeURI(temp_var[1]);
}
}
var elementOnlyFirstPage = document.getElementsByClassName('first')[0];
if (vars['page'] != "1"){
elementOnlyFirstPage.hidden = true
}
}
</script></head><body style="border:0; margin:0;" onload="initHeader()">
<br><br>
<p class="always">
Material Number: {{materialnumber}}
</p>
<p class="first">
Date: {{date}}
</p>
</body></html>

Im Body-Teil des HTML-Codes definieren wir zwei Elemente mit zwei Klassen: eines, das immer sichtbar ist (Klasse ‘always’), und eines, das nur auf der ersten Seite sichtbar ist (Klasse ‘first’).
In der Funktion initHeader() extrahieren wir die aktuelle Seitenzahl und machen sie über vars[‘page’] zugänglich.
Wir extrahieren auch das Element, das nur auf der ersten Seite über seine Klasse sichtbar sein soll.
Dann überprüfen wir die aktuelle Seite.
Wenn es das erste ist, setzen wir die Eigenschaft hidden des Elements auf false, andernfalls auf true.   Mit diesem Ansatz können Sie den Inhalt Ihrer Kopf-/Fußzeile abhängig von der aktuellen PDF-Seite steuern.

Tags:BENUTZEROBERFLÄCHEdynamischFußzeileKopfballpdfHTMLSchabloneSeiteSkriptAnKopfballAnTextSeiteSkriptHTMLFußzeileSchablone

Was this article helpful?

Yes  No
Related Articles
  • Wie man mit Dateien umgeht, die mit dem FileUploader ausgewählt wurden
  • Feinabstimmung und Ausführung benutzerdefinierter AI-Modelle in Simplifier
  • Verwendung der Simplifier Teams App
  • Wie man wertvolle Hilfen und Vorschläge in Benutzereingaben integriert
  • So integrieren Sie Simplifier in CI/CD-Pipelines
  • So verwenden Sie Google reCAPTCHA v3 Essentials
Leave A Comment Antworten abbrechen

Du musst angemeldet sein, um einen Kommentar abzugeben.

Plugins
  • PDF-Vorlagen: Gestalten Sie den Inhalt der Kopf-/Fußzeile dynamisch
  • Plugin-Entwicklung mit NodeJS
  • So verwenden Sie das Simplifier Content Repository Plugin
  • Erstellen Sie eine PDF-Vorlage über das Plugin
  • Generieren eines PDFs mit Simplifier per Plugin
  • Verwenden Sie das ContentRepository-Plug-In, um Dateien von Ihrem Windows-Freigabevolume zu verarbeiten
Knowledgebase Categories
  • Erste Schritte 4
  • Mobiler Client 2
  • Layout & Design 4
  • Widgets 8
  • Integration 10
  • Datenbank Handling 1
  • Anleitungen 27
  • Best Practices 4
  • Cloud Services 6
  • Plugins 6

  Konvertieren von Text in Sprache mit dem Google TTS Connector

Verwenden Sie die Adobe PDF-Einbettungs-API in Ihrer Simplifier-Anwendung  

Link einfügen/ändern

Gib die Ziel-URL ein

Oder verlinke auf bestehende Inhalte

    Es wurde kein Suchbegriff angegeben. Es werden die aktuellen Inhalte angezeigt. Verwende zur Auswahl eines Elements die Suche oder die Hoch-/Runter-Pfeiltasten.