←Dokument generieren (Einzeln)

Zurück zur Hauptübersicht: Alle Vorlagentypen, Knotenparameter und Ausgabefelder

HTML Vorlage

Was dieser Leitfaden umfasst

Diese Anleitung führt Sie durch das Rendern eines einzelnen Bildes. HTML Rechnung In n8n Verwendung invoice_sample_1.html Und invoice_sample_data_1.jsonDie Vorlage verwendet Schnurrbart-Syntax ({{recipient.name}}, {{#each subInfo}}). HTML ist die nur Vorlagentyp, der das Einfügen von Roh-Markup unterstützt HTML CodeDie Ausgabe ist HTML nur (Ideal für E-Mail-Texte oder Web-Vorschauen).

Verwandte Blog-Beiträge

Zu dieser Funktion gibt es noch keinen Blogbeitrag – folgt in Kürze.

Schauen Sie sich in der Zwischenzeit im PDF4me-Blog Tutorials und Arbeitsabläufe für alle Plattformen an.

Besuchen Sie den Blog →

Bevor Sie beginnen

HTML Vorlage mit Schnurrbart-Tags

Das Muster invoice_sample_1.html ist ein vollständiges Rechnungslayout mit verschachtelten Pfaden ({{recipient.postalAddress.street1}}) und eine Zeilenelementschleife ({{#each subInfo}}Die Pfade müssen exakt Ihrer JSON-Struktur entsprechen.

Passende Datendatei

Verwenden invoice_sample_data_1.json (empfohlen), test.xml, oder test.csvDie JSON verwendet verschachtelte Objekte und ein Unterinformationen Array. CSV Die Felder werden vereinfacht und pro Position wird eine Zeile verwendet.

PDF4me Berechtigung in n8n

Erstellen Sie einen PDF4me Berechtigung in n8n und fügen Sie Ihren ein API Schlüssel. Derselbe Schlüssel funktioniert für alle PDF4me Knoten in Ihrer Instanz.

→ Holen Sie sich Ihr API Schlüssel

Beispieldateipaket

Laden Sie alle vier Dateien unten herunter. HTML Vorlage plus drei Datenformate mit demselben Rechnungsinhalt.

invoice_sample_1.html

Vollständige Rechnung HTML mit Schnurrbart-Etiketten

invoice_sample_data_1.json

Verschachtelt JSON mit SubInfo-Array (empfohlen)

test.xml

Gleiche Rechnungsdaten wie XML

test.csv

Abgeflacht CSV (zwei Zeilen mit Einzelposten)

Was ist in den Beispieldateien enthalten?

Vorlagenlayout (invoice_sample_1.html)

Das Beispiel ist ein gestyltes HTML Rechnung (Tabellen, Logo, PDF4me Verkäuferblock). Dynamische Abschnitte:

Dokumentenabschnitt	Statischer Inhalt (im Template festgelegt)	Platzhalter für Schnurrbart (aus Daten gefüllt)
Empfängeradresse	(nur Layout)	{{recipient.name}}, {{coText}}, {{recipient.postalAddress.*}}
Verkäuferblockierung	PDF4meZürich, dev.pdf4me.com	(statisch)
Käufer / Lieferung	Käuferlabel	{{buyer.name}}, {{coTextDelivery}}, {{buyer.postalAddress.*}}
Rechnungsmeta	Fälligkeitsdatum, Rechnungsnummer, Ausgestellt auf Etiketten	{{dueDate}}, {{invoiceNumber}}, {{issuedOn}}
Tabelle der Einzelposten	Produkt, Zeitraum, Menge, Preis, MwSt., Gesamtbetrag (Überschriften)	{{#each subInfo}} … {{plan}}, {{quantity}}, {{vat}}, {{totalPrice}}
Spalte „Zeitraum“	(ein Bereich pro Rechnung)	{{periodStart}} - {{periodEnd}}
Gesamtzeile	Gesamtsaldo-Etikett	{{totalAmount}}

:::tipp Mustache-Syntax (HTML nur) HTML Vorlagen verwenden {{fieldName}} Und {{object.nestedKey}}. Zeilenelemente wiederholen mit {{#each subInfo}} … {{/each}}Dies unterscheidet sich von Word-Vorlagen, die verwenden <<[fieldName]>>Siehe die HTML Vorlage-Einrichtungsanleitung Weitere Muster finden Sie hier.

:::

:::Notiz HTML Code vs. Datei-Upload

Code vs. Datei-Upload ... HTML Code ist nur gültig, wenn Vorlagendateityp Ist HTMLFür Word, PDF-Formulare, Serienbriefe oder Google Docs verwenden Sie Binärdaten. Base64, oder URL stattdessen. :::

Feldzuordnung über alle Datendateien hinweg

HTML placeholder	JSON path (invoice_sample_data_1.json)	XML element (test.xml)	CSV column (test.csv)	Sample value
{{recipient.name}}	recipient.name	Recipient/Name	recipient_name	Test AG
{{coText}}	coText	CoText	coText	cotext
{{recipient.postalAddress.street1}}	recipient.postalAddress.street1	Recipient/PostalAddress/Street1	recipient_street1	Test Street1
{{recipient.postalAddress.street2}}	recipient.postalAddress.street2	Recipient/PostalAddress/Street2	recipient_street2	Test Street2
{{recipient.postalAddress.zipCode}} {{city}}	recipient.postalAddress.zipCode, .city	Recipient/PostalAddress/ZipCode, City	recipient_zipCode, recipient_city	8000 Zurich
{{recipient.postalAddress.country}}	recipient.postalAddress.country	Recipient/PostalAddress/Country	recipient_country	Switzerland
{{buyer.name}}	buyer.name	Buyer/Name	buyer_name	buyer name
{{coTextDelivery}}	coTextDelivery	CoTextDelivery	coTextDelivery	Delivery text
{{buyer.postalAddress.street1}}	buyer.postalAddress.street1	Buyer/PostalAddress/Street1	buyer_street1	Test Street1
{{buyer.postalAddress.street2}}	buyer.postalAddress.street2	Buyer/PostalAddress/Street2	buyer_street2	Test Street2
{{dueDate}}	dueDate	DueDate	dueDate	2025-04-30
{{invoiceNumber}}	invoiceNumber	InvoiceNumber	invoiceNumber	123456
{{issuedOn}}	issuedOn	IssuedOn	issuedOn	2025-04-01
{{periodStart}} - {{periodEnd}}	periodStart, periodEnd	PeriodStart, PeriodEnd	periodStart, periodEnd	2025-03-01 to 2025-03-31
{{#each subInfo}} {{plan}}	subInfo[].plan	SubInfo/Item/Plan	plan	PDF4me base 1000
{{quantity}}	subInfo[].quantity	SubInfo/Item/Quantity	quantity	1
{{vat}}	subInfo[].vat	SubInfo/Item/Vat	vat	2.83
{{totalPrice}}	subInfo[].totalPrice	SubInfo/Item/TotalPrice	totalPrice	37.83
{{totalAmount}}	totalAmount	TotalAmount	totalAmount	124.31

Das Muster JSON beinhaltet zwei Objekte in subInfo (PDF4me (Basis 1000 und Anrufpaket 2000). {{#each subInfo}} Blöcke in der HTML Für jedes Element wird eine Tabellenzellenzeile angezeigt.

Der Arbeitsablauf im Überblick

Schnellster Test: Einfügen HTML Und JSON direkt in der PDF4me Knoten (keine Dateiknoten erforderlich).

Manual Trigger  →  PDF4me Generate Document (Single)  →  (optional) Send Email / Write Binary File

Schritt	n8n Knoten	Zweck
1	Manueller Auslöser	Starten Sie den Workflow bei Bedarf
2	PDF4me → Dokument generieren (Einzeln)	Paste HTML Code + JSON Text, Ausgabe gerendert HTML
3	E-Mail senden oder Binärdatei schreiben (optional)	Liefern oder sparen generated_document_output.html

Zielkonfiguration: eingefügt HTML Code + JSON In Dokumentdaten Text + HTML Ausgabe

---

Schritt 1: Laden Sie die Beispieldateien herunter

1. Herunterladen invoice_sample_1.html Und invoice_sample_data_1.json von Beispieldateipaket über.
2. Öffnen Sie beide Dateien in einem Texteditor, damit Sie den gesamten Inhalt hineinkopieren können. n8n Knoten.
3. Optionaler Download test.xml oder test.csv zum Testen XML oder CSV Datentypen später.

---

Schritt 2: Erstellen Sie die n8n Workflow

1. In n8n, einen neuen Workflow erstellen.
2. Füge ein Manueller Auslöser Knoten.
3. Hinzufügen PDF4me → Dokument generieren (Einzeln) nach dem Auslöser.
4. Verbinden Sie Ihr PDF4me BerechtigungDie

Für die Produktion können Sie Folgendes hinzufügen: Binärdatei lesen Knoten anstelle von HTML Code (siehe Alternative Vorlageneingabe unten).

---

Schritt 3: Konfigurieren Sie die HTML Vorlage (HTML Code)

Öffne die PDF4me Knoten und legen Sie die Vorlagenfelder fest:

Feld	Wert
Vorlagendateityp	HTML
Ausgabetyp	HTML (einzige Option für HTML Vorlagen)
Eingabetyp der Vorlagendatei	HTML Code
Vorlagendateiname	invoice_sample_1.html
HTML Code	Fügen Sie die gesamte Inhalt von invoice_sample_1.html

Teilweise HTML Ist OK

Wenn Ihr Code-Snippet Folgendes auslässt <html> oder <head>Der Knoten kapselt es in eine einfache HTML Shell wird automatisch geöffnet. Die Beispieldatei ist ein vollständiges Dokument, also fügen Sie sie unverändert ein.

---

Schritt 4: Dokumentdaten konfigurieren (JSON)

Feld	Wert
Dokumentdaten-Eingabetyp	Text
Dokumentdatentyp	JSON
Dokumentdaten Text	Fügen Sie den vollständigen Inhalt ein von invoice_sample_data_1.json (siehe unten stehenden Block)

{
  "recipient": {
    "name": "Test AG",
    "postalAddress": {
      "street1": "Test Street1",
      "street2": "Test Street2",
      "zipCode": "8000",
      "city": "Zurich",
      "country": "Switzerland"
    }
  },
  "coText": "cotext",
  "buyer": {
    "name": "buyer name",
    "postalAddress": {
      "street1": "Test Street1",
      "street2": "Test Street2"
    }
  },
  "coTextDelivery": "Delivery text",
  "dueDate": "2025-04-30",
  "invoiceNumber": "123456",
  "issuedOn": "2025-04-01",
  "subInfo": [
    {
      "plan": "PDF4me base 1000",
      "quantity": 1,
      "price": 35,
      "vat": 2.83,
      "totalPrice": 37.83
    },
    {
      "plan": "Call Package 2000",
      "quantity": 1,
      "price": 80,
      "vat": 6.48,
      "totalPrice": 86.48
    }
  ],
  "totalAmount": 124.31,
  "periodStart": "2025-03-01",
  "periodEnd": "2025-03-31"
}

Kernknoteneinstellungen (Zusammenfassung)

Feld	Wert	Anmerkungen
Anmeldeinformationen zum Verbinden mit	Dein PDF4me Berechtigung	Erhalten API Schlüssel
Ressource	Generate
Operationen generieren	Dokument generieren (Einzeln)
Name der Binärdatenausgabe	data (Standard)	Ausgabe ist HTML in dieser binären Eigenschaft

---

Schritt 5: Ausführen und Überprüfen HTML

1. Klicken Workflow ausführenDie
2. Öffne die PDF4me Knotenausgabe. Unter Binäroffenes Grundstück data (generated_document_output.html).
3. Bitte prüfen Sie, ob die ausgestellte Rechnung Folgendes enthält:
   • Empfänger → Test AG, cotext, Teststraße 1/2, 8000 Zürich, Schweiz
   • Käufer → Käufername, Liefertext, Teststraße 1/2
   • Rechnungsmeta → Fälligkeitsdatum 30.04.2025, Rechnungsnummer 123456, Ausstellungsdatum 01.04.2025
   • Positionen → PDF4me Basis 1000 und Anrufpaket 2000 mit Mengen und MwSt.
   • Gesamtsaldo → 124,31

Wenn ein Platzhalter leer angezeigt wird, überprüfen Sie den Mustache-Pfad anhand Ihres JSONDie recipient.postalAddress.street1 Die Vorlage erfordert die gleiche verschachtelte Datenstruktur.

---

Schritt 6: Ausgabe senden oder speichern (optional)

E-Mail senden: Karte PDF4me binär data als die HTML body (enable HTML E-Mail).

Binärdatei schreiben:

Feld	Wert
Dateiname	invoice-output.html
Name der Dateneigenschaft	data
Ausgabepfad	Ordner, in dem n8n sollte die Datei schreiben

---

Alternative Vorlageneingabe: Laden HTML aus Datei

Wenn Sie es vorziehen, nicht einzufügen HTML in den Knoten:

1. Hinzufügen Binärdatei lesen vorher PDF4me und richten Sie es auf invoice_sample_1.htmlDie
2. In PDF4me Satz Eingabetyp der Vorlagendatei Zu Binärdaten, Vorlage Binäre Eigenschaft Zu data, Vorlagendateiname Zu invoice_sample_1.htmlDie
3. Halten Dokumentdaten-Eingabetyp als Text und fügen Sie die JSON wie in Schritt 4.

Sie können auch die .html bei einer öffentlichen URL und verwenden Eingabetyp der Vorlagendatei: URL mit Vorlagendatei URLDie

---

Alternative Datenformate

Option A: JSON Datei als Binärdatei (invoice_sample_data_1.json)

1. Hinzufügen Binärdatei lesen für die JSON Datei (oder verwenden Sie eine Verschmelzen Knoten, falls die Vorlage ebenfalls binär ist).
2. Satz Dokumentdaten-Eingabetyp Zu Binärdaten, Dokumentdatentyp Zu JSON, Dokument-Binär-Eigenschaft zu Ihrem Datenfeld, Dokumentdatendateiname Zu invoice_sample_data_1.jsonDie

Option B: XML (test.xml)

Satz Dokumentdatentyp Zu XML und fügen Sie den Inhalt von ein test.xml:

<?xml version="1.0" encoding="UTF-8"?>
<Invoice>
    <Recipient>
        <Name>Test AG</Name>
        <PostalAddress>
            <Street1>Test Street1</Street1>
            <Street2>Test Street2</Street2>
            <ZipCode>8000</ZipCode>
            <City>Zurich</City>
            <Country>Switzerland</Country>
        </PostalAddress>
    </Recipient>
    <CoText>cotext</CoText>
    <Buyer>
        <Name>buyer name</Name>
        <PostalAddress>
            <Street1>Test Street1</Street1>
            <Street2>Test Street2</Street2>
        </PostalAddress>
    </Buyer>
    <CoTextDelivery>Delivery text</CoTextDelivery>
    <DueDate>2025-04-30</DueDate>
    <InvoiceNumber>123456</InvoiceNumber>
    <IssuedOn>2025-04-01</IssuedOn>
    <SubInfo>
        <Item>
            <Plan>PDF4me base 1000</Plan>
            <Quantity>1</Quantity>
            <Price>35</Price>
            <Vat>2.83</Vat>
            <TotalPrice>37.83</TotalPrice>
        </Item>
        <Item>
            <Plan>Call Package 2000</Plan>
            <Quantity>1</Quantity>
            <Price>80</Price>
            <Vat>6.48</Vat>
            <TotalPrice>86.48</TotalPrice>
        </Item>
    </SubInfo>
    <TotalAmount>124.31</TotalAmount>
    <PeriodStart>2025-03-01</PeriodStart>
    <PeriodEnd>2025-03-31</PeriodEnd>
</Invoice>

Option C: CSV (test.csv)

Satz Dokumentdatentyp Zu CSV und fügen Sie die CSV Körper. Die Probe hat zwei Datenzeilen (einer pro subInfo Positionselement); Kopfspalten verwenden vereinfachte Namen wie recipient_name Und plan:

recipient_name,recipient_street1,recipient_street2,recipient_zipCode,recipient_city,recipient_country,coText,buyer_name,buyer_street1,buyer_street2,coTextDelivery,dueDate,invoiceNumber,issuedOn,periodStart,periodEnd,totalAmount,plan,quantity,price,vat,totalPrice
"Test AG","Test Street1","Test Street2","8000","Zurich","Switzerland","cotext","buyer name","Test Street1","Test Street2","Delivery text","2025-04-30","123456","2025-04-01","2025-03-01","2025-03-31",124.31,"PDF4me base 1000",1,35,2.83,37.83
"Test AG","Test Street1","Test Street2","8000","Zurich","Switzerland","cotext","buyer name","Test Street1","Test Street2","Delivery text","2025-04-30","123456","2025-04-01","2025-03-01","2025-03-31",124.31,"Call Package 2000",1,80,6.48,86.48

---

Produktionsablaufmuster

Gängige Methoden zur Bereitstellung von HTML-Vorlagen und Daten in der ProduktionOnce the sample test works, replace the Manual Trigger with these patterns.

E-Mail-Rechnung vom Webhook

1. Der Webhook empfängt die Abrechnungsdaten.
2. PDF4me Läuft mit festem HTML Code Vorlage.
3. Map-Webhook JSON Zu Dokumentdaten TextDie
4. E-Mail senden verwendet Ausgabe HTML als Nachrichtentext.

Vorlage aus dem Cloud-Speicher

1. Google Drive / S3-Speicher invoice_sample_1.htmlDie
2. Download-Knoten laden HTML als Binärdaten.
3. PDF4me: Eingabetyp der Vorlagendatei = Binärdaten.
4. Daten, die aus Tabellen oder CRM als JSONDie

Öffentlich URLs für Vorlage und Daten

1. Gastgeber .html Und .json öffentlich HTTPS URLsDie
2. Satz Eingabetyp der Vorlagendatei = URL Und Dokumentdaten-Eingabetyp = URLDie
3. Es werden keine Read Binary File-Knoten benötigt.

Häufig gestellte Fragen

Why use HTML Code instead of uploading a file?+

HTML Code lets you test instantly without file nodes. It is only available when Template File Type is HTML. For large templates or CI-managed markup, use Binary Data or URL instead.

Can HTML templates output PDF?+

No. When Template File Type is HTML, Output Type is HTML only. To get a PDF from HTML content, chain a separate PDF4me Convert node after this step.

How do line items work in the sample?+

The subInfo array in JSON drives {{#each subInfo}} blocks in the HTML table. Each object renders plan, quantity, vat, and totalPrice in aligned columns. Add or remove array items to change row count.

Why does test.csv have two rows?+

CSV flattens nested data. Each row represents one line item (plan, quantity, price, vat, totalPrice) while repeating shared invoice fields (recipient, buyer, dates). Both rows share the same totalAmount.

JSON vs XML vs CSV: which should I use?+

JSON is best for n8n because it matches nested mustache paths (recipient.postalAddress.street1) and the subInfo array. XML uses PascalCase elements in test.xml. CSV suits spreadsheet exports but uses flattened column names.

Verwandte Leitfäden

• Dokument generieren (Einzeln) – Übersicht: alle Parameter, Ausgabefelder und Vorlagentypen
• PDF4me Word-Vorlage: Wort .docx mit <<[field]>> Tags und PDF Ausgabe
• Generieren HTML aus Vorlage in Make: gleiches Muster in Make

Back to overviewHTML template setup guide