Vom einfachen PDF zum Branding: HTML-Kopf- und Fußzeilen in n8n hinzufügen! (Kein Zusammenführen erforderlich)

Wenn Sie verwenden n8n zur Automatisierung, Hinzufügen HTML-Header und -Footer Das Hinzufügen von benutzerdefinierten Kopf- und Fußzeilen zu Ihren PDFs ist unkompliziert, nur vier Schritte, kein Code erforderlich. Diese Anleitung zeigt Ihnen, wie Sie einen n8n-Workflow einrichten, der eine PDF-Datei von Dropbox herunterlädt, mit PDF4me eine benutzerdefinierte Kopf- oder Fußzeile hinzufügt und die angepasste Datei anschließend wieder hochlädt. Sie fügen den HTML-Code direkt in die entsprechende Datei ein. HTML-Kopf- und Fußzeile zu PDF hinzufügen Node, keine separate Header-Datei erforderlich.

Was Sie benötigen​

• n8n: Selbst gehostet oder n8n CloudFügen Sie den PDF4me-Knoten aus dem n8n-Knotenpanel hinzu.
• PDF4me API-Schlüssel: Holen Sie sich Ihren PDF4me-API-Schlüssel (Kostenloser Einstieg). Zum ersten Mal dabei? Folgen Verbinde PDF4me mit n8nDie
• DropboxWir nutzen Dropbox zum Herunterladen und Hochladen. Sie können Dropbox ebenfalls nutzen. Google Drive, OneDriveoder jeder andere Knoten, der Binärdateien als Ein-/Ausgabe verarbeitet. Durch den Austausch der Knoten bleibt der Ablauf unverändert.

Der Flow auf einen Blick​

Ihr n8n-Workflow läuft in vier Knoten:

1. Auslösen: Beim Klicken auf „Workflow ausführen“ (manuell) zum Testen oder ein automatisierter Auslöser (z. B. Dropbox, Webhook), der bei Eingang einer neuen Datei aktiviert wird.
2. Datei herunterladen (Dropbox): Ruft die PDF-Datei von einem Pfad ab. Die Ausgabe erfolgt in einem Binärfeld (z. B. data).
3. HTML-Kopf- und Fußzeile zu PDF hinzufügen (PDF4me): Nimmt die PDF-Binärdatei, fügt Ihren HTML-Code ein und wendet ihn als Kopf- oder Fußzeile an. Gibt die geänderte PDF-Datei in ein neues Binärfeld aus (z. B. .html). document).
4. Laden Sie eine Datei hoch (Dropbox): Speichert die geänderte PDF-Datei in einem Ordner mit einem von Ihnen gewählten Namen.

Kein Zusammenführungsschritt erforderlich; der Knoten „HTML-Kopf- und Fußzeile hinzufügen“ erzeugt die neue PDF-Datei direkt. Dieselbe Datei, nur mit Ihrem Branding; optional mit neuem Namen.

Schritt 1: Auslöser + Datei herunterladen​

Füge einen Trigger hinzu und die Dropbox Datei herunterladen Knoten zum Laden der PDF-Datei in den Workflow.

1. Füge einen Auslöser hinzu: Beim Klicken auf „Workflow ausführen“ zum Testen oder z.B. Dropbox Auslösen, wenn eine Datei erstellt wird.
2. Datei hinzufügen/herunterladen (Dropbox)

• Anmeldeinformationen zum Verbinden mitIhr Dropbox-Konto.
• Ressource: Datei | Betrieb: Herunterladen.
• DateipfadVollständiger Pfad zu Ihrer PDF-Datei, z.B. /Blog Data/sample_3_page.pdfDie
• Ausgabedatei im Feld speichern: data (oder einen anderen Namen, auf den Sie im nächsten Knotenpunkt Bezug nehmen werden).

Führen Sie den Knoten aus. Die Ausgabe wird Folgendes enthalten: 1 Stück mit dem PDF in der data Binärfeld.

Schritt 2: HTML-Kopf- und Fußzeile zum PDF hinzufügen​

Füge die PDF4me Knoten und auswählen Bearbeiten → HTML-Kopf- und Fußzeile zu PDF hinzufügenFügen Sie Ihren HTML-Code ein, legen Sie die Position (Kopf- oder Fußzeile) und die Ränder fest.

1. Füge den PDF4me-Knoten hinzu. → Bearbeiten → HTML-Kopf- und Fußzeile zu PDF hinzufügenDie
2. Anmeldeinformationen zum Verbinden mitIhr PDF4me-Konto.
3. EingabedatentypBinärdaten.
4. Binäres Eingabefeld: data (dasselbe wie beim Download-Knoten) Ausgabedatei im Feld speichern).
5. HTML-Inhalt (Erforderlich): Fügen Sie Ihren Header- oder Footer-HTML-Code ein. Beispiel:

<div style="width:100%; font-family: Segoe UI, Arial, sans-serif; color:#333; padding:12px 18px 8px 18px; box-sizing:border-box;">
 <table style="width:100%; border-collapse:collapse;">
 <tr>
 <td>Your Company Name</td>
 <td style="text-align:right;">Document Title | Page {{page}} of {{total}}</td>
 </tr>
 </table>
</div>

6. Standort: Kopfzeile oder FußzeileDie
7. Seiten: all oder eine Spanne wie 1-3 (Seiten 1 bis 3).
8. Erste Seite überspringenAusschalten, um die Anwendung auf alle Seiten anzuwenden; Einschalten, um die erste Seite zu überspringen.
9. Ränder (Px): n8n verwendet Pixel. Beispiel: Linker Rand 5, Rand rechts 5, Marge Top 10, Rand unten 10.
10. Name der Ausgabedateiz.B. document_with_html_header_footer.pdfDie
11. Dokumentnamez.B. document.pdf (Quellenangabe).
12. Name der Binärdatenausgabe: document (das Feld, das der Upload-Knoten lesen wird).

Führen Sie den Knoten aus. Die Ausgabe enthält die geänderte PDF-Datei. document Binärfeld (Dateigröße nimmt zu, z. B. 2,54 kB → 70,3 kB).

Schritt 3: Datei hochladen​

Speichern Sie die geänderte PDF-Datei wieder in Dropbox.

1. Datei hinzufügen (Dropbox)

• Anmeldeinformationen zum Verbinden mitDasselbe Dropbox-Konto.
• Ressource: Datei | Betrieb: Hochladen.
• DateipfadVollständiger Pfad einschließlich Dateiname, z.B. /Blog Data/Header_Added_Output.pdfDie
• Binärdatei: An.
• Binäres Eingabefeld: document (vom Knoten „HTML-Kopf- und Fußzeile hinzufügen“). Nicht verwenden dataDas ist das Original-PDF.

Führen Sie den Workflow aus. Die Datei Header_Added_Output.pdf (oder Ihr gewählter Name) wird in Dropbox mit der entsprechenden Kopf- oder Fußzeile angezeigt.

Beispielhafte HTML-Codeausschnitte: Kopieren und in n8n verwenden​

Diese PDF-freundlich Code-Schnipsel funktionieren in der HTML-Inhalt Feld. Erweitern Sie einen der unten stehenden Blöcke, um ihn zu kopieren und einzufügen.

Überschriften​

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;"></td>
 <td style="width: 50%; text-align: right; vertical-align: top;">
 Author: Per Nordqvist<br/>
 Date: 2025-11-12<br/>
 Revision: 4.24
 </td>
 </tr>
</table>

<div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #333333;">Document Title - Confidential</div>

Fußzeilen​

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">Confidential. For internal use only. All rights reserved.</td>
 </tr>
</table>

<div style="text-align: center; font-family: Arial, sans-serif; font-size: 10px;">Page {{page}} of {{total}}</div>

Bevor Sie HTML einfügen: Eine kurze Checkliste​

• Inline-CSS: Verwenden style="..." auf Elementen. Externe Stylesheets werden nicht angewendet.
• Tisch- oder einfache Blöcke: Verwenden <table> oder Divs mit expliziten width für eine stabile Anordnung.
• EinheitenDie Randeinstellungen von n8n befinden sich in Pixel (Px)Innerhalb von HTML verwenden Sie px oder %Die
• Test zuerstFügen Sie Ihren Codeausschnitt in die HTML-Kopf- und Fußzeile zu PDF hinzufügen Tester vor dem Verdrahten mit n8n.

:::Tipp: Probieren Sie es im API-Tester aus. Fügen Sie einen beliebigen Codeausschnitt oben in den API-Tester ein. HTML-Kopf- und Fußzeile zu PDF hinzufügenTester mit einer Beispiel-PDF-Datei und Ihrem API-Schlüssel. Jeder Codeblock kann direkt kopiert werden. :::

Anwendungsbereiche: n8n vs. Make vs. Power Automate vs. API​

1. n8nVerwenden Sie den oben beschriebenen Ablauf: Herunterladen → HTML-Kopf- und Fußzeile zum PDF hinzufügen → Hochladen. Ränder in PixelDie
2. Machen: HTML-Kopf- und Fußzeile in Make hinzufügen. Margen in MillimeterDie
3. Power Automate: HTML-Kopf- und Fußzeile in Power Automate hinzufügenVerwendet eine separate Header-Datei von Dropbox.
4. API: Anruf POST /api/v2/AddHtmlHeaderFooter mit docContent, docName, htmlContent, Und StandortDie

Derselbe HTML-Code funktioniert überall.

Nächste Schritte​

• Führen Sie den Workflow aus.Folgen Sie den drei oben genannten Schritten und fügen Sie einen Codeausschnitt ein in HTML-Inhaltund ausführen.
• Probieren Sie die API aus.Verwenden Sie die HTML-Kopf- und Fußzeile zu PDF hinzufügen Tester zur Vorschau Ihres HTML-Codes.
• Lesen Sie die n8n-Dokumentation.: HTML-Kopf- und Fußzeile zu PDF hinzufügen (n8n) für die vollständigen Parameter.
• Vollständige API-Referenz: HTML-Kopf- und Fußzeile zu PDF hinzufügen (PDF4me-API)Die