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.
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).
<h2>Feedback</h2>
<table>
<tr>
<th>Date</th>
<th>Vote</th>
</tr>
{{#data}}
<tr><td>{{date}}</td><td>{{vote}}</td></tr>
{{/data}}
</table>
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;}
}
{
"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.
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> oder
<p>This is the header!</p><!DOCTYPE html>Genau wie im Body-Abschnitt können Sie auf die Daten aus dem JSON-Objekt zugreifen und diese in der Kopf-/Fußzeile anzeigen:
<p>This is the footer!</p><!DOCTYPE html> An dieser Stelle werden die gleichen Daten als Kopf-/Fußzeile aller PDF-Seiten angezeigt.
<p>Material Number: {{materialnumber}}</p>
<p>Date: {{date}}</p>
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:
<!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.