←Genera documento (singolo)

Torna alla guida principale: tutti i tipi di modello, i parametri dei nodi e i campi di output

HTML modello

Cosa tratta questa guida

Questa guida ti illustra come eseguire il rendering di un singolo HTML fattura In n8n utilizzando invoice_sample_1.html E invoice_sample_data_1.jsonIl modello utilizza sintassi dei baffi {{recipient.name}}, {{#each subInfo}}). HTML è il soltanto tipo di modello che supporta l'incolla di markup non elaborato HTML Codice. L'output è HTML soltanto (ideale per il corpo delle email o per le anteprime web).

Articoli correlati del blog

Non ci sono ancora post sul blog dedicati a questa funzionalità — in arrivo a breve.

Nel frattempo, dai un'occhiata al blog di PDF4me per trovare tutorial e procedure operative su tutte le piattaforme.

Visita il blog →

Prima di iniziare

HTML modello con tag baffi

Il campione invoice_sample_1.html è un layout di fattura completo con percorsi annidati ({{recipient.postalAddress.street1}}) e un ciclo di elementi di riga ({{#each subInfo}}I percorsi devono corrispondere esattamente alla struttura JSON.

File di dati corrispondente

Utilizzo invoice_sample_data_1.json (consigliato), test.xml, O test.csv. JSON utilizza oggetti annidati e un subInfo vettore. CSV appiattisce i campi e utilizza una riga per ogni voce.

PDF4me credenziale in n8n

Crea un PDF4me credenziale in n8n e incolla il tuo API chiave. La stessa chiave funziona su tutti PDF4me nodi nella tua istanza.

→ Ottieni il tuo API chiave

Pacchetto di file di esempio

Scarica tutti e quattro i file qui sotto. Uno HTML Modello più tre formati di dati con lo stesso contenuto della fattura.

invoice_sample_1.html

Fattura completa HTML con etichette a forma di baffi

invoice_sample_data_1.json

annidato JSON con array subInfo (consigliato)

test.xml

Stessi dati della fattura XML

test.csv

Appiattito CSV (due righe di voci)

Cosa contengono i file di esempio?

Layout del modello (invoice_sample_1.html)

Il campione è stilizzato HTML fattura (tabelle, logo, PDF4me blocco venditore). Sezioni dinamiche:

Sezione Documenti	Contenuto statico (fisso nel template)	Segnaposto per i baffi (compilato con i dati)
Indirizzo del destinatario	(solo layout)	{{recipient.name}}, {{coText}}, {{recipient.postalAddress.*}}
Blocco venditore	PDF4meZurigo, dev.pdf4me.com	(statico)
Acquirente / Consegna	Etichetta dell'acquirente	{{buyer.name}}, {{coTextDelivery}}, {{buyer.postalAddress.*}}
Metadati della fattura	Data di scadenza, numero di fattura, emesso sulle etichette	{{dueDate}}, {{invoiceNumber}}, {{issuedOn}}
Tabella delle voci	Prodotto, Periodo, Quantità, Prezzo, IVA, Totale intestazioni	{{#each subInfo}} … {{plan}}, {{quantity}}, {{vat}}, {{totalPrice}}
Colonna del periodo	(un solo intervallo per fattura)	{{periodStart}} - {{periodEnd}}
Riga totale	Etichetta del saldo totale	{{totalAmount}}

Sintassi dei baffi (HTML soltanto)

HTML modelli utilizzano {{fieldName}} E {{object.nestedKey}}. Ripeti le voci di riga con {{#each subInfo}} … {{/each}}. Questo è diverso dai modelli di Word, che utilizzano <<[fieldName]>>. Vedi il HTML guida alla configurazione del modello Per altri modelli.

:::nota HTML Caricamento del codice vs caricamento del file HTML Codice è valido solo quando Tipo di file modello È HTML. Per Word, moduli PDF, stampa unione o Google Docs, utilizzare dati binari, Base64, O URL Invece. :::

Mappatura dei campi su tutti i file di dati

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

Il campione JSON grin due oggetti in subInfo PDF4me base 1000 e pacchetto chiamate 2000). Il {{#each subInfo}} blocchi nel HTML visualizza una riga di celle della tabella per ogni elemento.

Panoramica del flusso di lavoro

Test più veloce: pasta HTML E JSON direttamente nel PDF4me nodo (non sono necessari nodi file).

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

Fare un passo	n8n nodo	Scopo
1	Grilletto manuale	Avvia il flusso di lavoro su richiesta
2	PDF4me → Genera documento (singolo)	Impasto HTML Codice + JSON Testo, output renderizzato HTML
3	Invia e-mail O Scrivi file binario (opzionale)	Consegna o salva generated_document_output.html

Configurazione di destinazione: incollata HTML Codice + JSON In Testo dei dati del documento + HTML produzione

---

Passaggio 1: Scarica i file di esempio

1. Scaricamento invoice_sample_1.html E invoice_sample_data_1.json dal Pacchetto di file di esempio Sopra.
2. Apri entrambi i file in un editor di testo in modo da poter copiare l'intero contenuto nel n8n nodo.
3. Download facoltativo test.xml O test.csv per testare XML O CSV tipi di dati in seguito.

---

Passaggio 2: creare il n8n Flusso di lavoro

1. In n8n, creare un nuovo flusso di lavoro.
2. Aggiungi un Grilletto manuale nodo.
3. Aggiungere PDF4me → Genera documento (singolo) dopo l'innesco.
4. Collega il tuo PDF4me credenziale.

Per la produzione puoi aggiungere un Leggere file binario nodo invece di HTML Codice (vedi Input modello alternativo sotto).

---

Passaggio 3: Configurare il HTML Modello (HTML Codice)

Apri il PDF4me nodo e imposta i campi del modello:

Campo	Valore
Tipo di file modello	HTML
Tipo di output	HTML (unica opzione per HTML modelli)
Tipo di input del file modello	HTML Codice
Tempo di creazione del file modello	invoice_sample_1.html
HTML Codice	Incolla il intero contenuti di invoice_sample_1.html

:::suggerimento parziale HTML È OK Se il tuo snippet omette <html> O <head>, il nodo lo avvolge in un base HTML shell automaticamente. Il file di esempio è un documento completo, quindi incollalo così com'è.

:::

---

Passaggio 4: Configura i dati del documento (JSON)

Campo	Valore
Tipo di immissione dati del documento	Testo
Tipo di dati del documento	JSON
Testo dei dati del documento	Incolla l'intero contenuto di invoice_sample_data_1.json (vedi il blocco sottostante)

{
  "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"
}

Impostazioni del nodo principale (riepilogo)

Campo	Valore	Note
Credenziali per connettersi con	Tuo PDF4me credenziale	Ottenere API chiave
Risorsa	Generate
Generare operazioni	Genera documento (singolo)
Nome dell'output dei dati binari	data (predefinito)	L'output è HTML in questa proprietà binaria

---

Passaggio 5: Eseguire e verificare HTML

1. Fare clic Eseguire il flusso di lavoro.
2. Apri il PDF4me output del nodo. Sotto Binarioproprietà aperta data generated_document_output.html).
3. Confermare che la fattura emessa mostri quanto segue:
   • Destinatario → Test AG, cotext, Test Street 1/2, 8000 Zurigo, Svizzera
   • Acquirente → nome dell'acquirente, testo di consegna, via di prova1/2
   • Metadati della fattura → Data di scadenza 30/04/2025, Numero fattura 123456, Emesso il 01/04/2025
   • Voci di riga → PDF4me base 1000 e pacchetto chiamate 2000 con quantità e IVA
   • Saldo totale → 124,31

Se un segnaposto viene visualizzato vuoto, controlla il percorso dei baffi rispetto al tuo JSON. recipient.postalAddress.street1 nel modello richiede la stessa struttura annidata nei dati.

---

Passaggio 6: Invia o salva l'output (facoltativo)

Invia e-mail: mappare la PDF4me binario data come il HTML corpo (abilita HTML e-mail).

Scrivi file binario:

Campo	Valore
Nome del file	invoice-output.html
Nome della proprietà dati	data
Percorso di output	Cartella dove n8n dovrebbe scrivere il file

---

Input modello alternativo: Carica HTML dal file

Se preferisci non incollare HTML nel nodo:

1. Aggiungere Leggere file binario Prima PDF4me e indicarlo invoice_sample_1.html.
2. In PDF4me impostato Tipo di input del file modello A Dati binari, Proprietà binaria del modello A data, Tempo di creazione del file modello A invoice_sample_1.html.
3. Mantenere Tipo di immissione dati del documento COME Testo e incolla il JSON come nel passaggio 4.

Puoi anche ospitare il .html in un luogo pubblico URL e utilizzare Tipo di input del file modello: URL con File modello URL.

---

Formati dati alternativi

Opzione A: JSON file come binario (invoice_sample_data_1.json)

1. Aggiungere Leggere file binario Per il JSON file (o utilizzare un Unire nodo se anche il modello è binario).
2. Impostato Tipo di immissione dati del documento A Dati binari, Tipo di dati del documento A JSON, Proprietà binaria del documento al tuo campo dati, Nome del file di dati del documento A invoice_sample_data_1.json.

Opzione B: XML test.xml)

Impostato Tipo di dati del documento A XML e incolla il contenuto di 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>

Opzione C: CSV test.csv)

Impostato Tipo di dati del documento A CSV e incolla il CSV corpo. Il campione ha due righe di dati (uno per subInfo voce di riga); le colonne di intestazione utilizzano nomi appiattiti come recipient_name E 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

---

Modelli di flusso di lavoro di produzione

Metodi comuni per fornire modelli HTML e dati in produzioneOnce the sample test works, replace the Manual Trigger with these patterns.

Invia la fattura via email tramite webhook

1. Il webhook riceve i dati di fatturazione.
2. PDF4me esegue con fisso HTML Codice modello.
3. Webhook della mappa JSON A Testo dei dati del documento.
4. Invia e-mail utilizza l'output HTML come corpo del messaggio.

Modello da archiviazione cloud

1. Archivi Google Drive/S3 invoice_sample_1.html.
2. Scarica i carichi del nodo HTML come binario.
3. PDF4me: Tipo di input del file modello = Dati binari.
4. Dati creati da Fogli o CRM COME JSON.

pubblico URLs per modello e dati

1. Ospite .html E .json in pubblico HTTPS URLs.
2. Impostato Tipo di input del file modello = URL E Tipo di immissione dati del documento = URL.
3. Non sono necessari nodi di lettura di file binari.

Domande frequenti

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.

Guide correlate

• Panoramica della generazione del documento (singolo).: tutti i parametri, i campi di output e i tipi di modello
• PDF4me Modello Word: Parola .docx con <<[field]>> etichette e PDF produzione
• Genera HTML da modello in Make: stesso schema in Make

Back to overviewHTML template setup guide