←Gerar documento (único)

Voltar ao guia principal: todos os tipos de modelos, parâmetros de nós e campos de saída.

HTML modelo

O que este guia abrange

Este guia orienta você na renderização de um único HTML fatura em n8n usando invoice_sample_1.html e invoice_sample_data_1.jsonO modelo usa sintaxe de bigode ({{recipient.name}}, {{#each subInfo}}). HTML é o apenas tipo de modelo que suporta a colagem de marcação bruta em HTML CódigoA saída é HTML apenas (Ideal para o corpo de e-mails ou pré-visualizações na web).

Artigos relacionados no blogue

Ainda não há nenhuma publicação no blogue sobre esta funcionalidade — em breve.

Entretanto, explore o blogue da PDF4me para encontrar tutoriais e fluxos de trabalho para todas as plataformas.

Visite o blogue →

Antes de começar

HTML modelo com etiquetas de bigode

A amostra invoice_sample_1.html é um layout de fatura completo com caminhos aninhados ({{recipient.postalAddress.street1}}) e um loop de item de linha ({{#each subInfo}}Os caminhos devem corresponder exatamente à sua estrutura JSON.

Arquivo de dados correspondente

Usar invoice_sample_data_1.json (recomendado), test.xml, ou test.csv. JSON usa objetos aninhados e um subInformações variedade. CSV Achata os campos e usa uma linha por item de linha.

PDF4me credencial em n8n

Criar um PDF4me credencial em n8n e cole o seu API chave. A mesma chave funciona em todos os PDF4me nós em sua instância.

→ Obtenha o seu API chave

Pacote de Arquivos de Amostra

Faça o download dos quatro arquivos abaixo. Um deles. HTML Modelo mais três formatos de dados com o mesmo conteúdo de fatura.

invoice_sample_1.html

Fatura completa HTML com etiquetas de bigode

invoice_sample_data_1.json

Aninhado JSON com matriz subInfo (recomendado)

test.xml

Os mesmos dados da fatura que XML

test.csv

Achatado CSV (duas linhas de itens)

O que há dentro dos arquivos de amostra?

Layout do modelo (invoice_sample_1.html)

A amostra é um modelo estilizado HTML fatura (tabelas, logotipo, PDF4me (Bloco do vendedor). Seções dinâmicas:

Seção de documentos	Conteúdo estático (fixo no modelo)	Marcador de posição para bigode (preenchido a partir de dados)
Endereço do destinatário	(somente layout)	{{recipient.name}}, {{coText}}, {{recipient.postalAddress.*}}
Bloqueio do vendedor	PDF4meZurique, dev.pdf4me.com	(estático)
Comprador / entrega	Etiqueta do comprador	{{buyer.name}}, {{coTextDelivery}}, {{buyer.postalAddress.*}}
Metadados da fatura	Data de vencimento, número da fatura, emitido em etiquetas	{{dueDate}}, {{invoiceNumber}}, {{issuedOn}}
Tabela de itens de linha	Cabeçalhos: Produto, Período, Quantidade, Preço, IVA, Total	{{#each subInfo}} … {{plan}}, {{quantity}}, {{vat}}, {{totalPrice}}
Coluna de período	(uma única faixa por fatura)	{{periodStart}} - {{periodEnd}}
Linha total	Rótulo de saldo total	{{totalAmount}}

:::dica Sintaxe Mustache (HTML apenas) HTML modelos usam {{fieldName}} e {{object.nestedKey}}Repita os itens da linha com {{#each subInfo}} … {{/each}}Isso é diferente dos modelos do Word, que usam <<[fieldName]>>Veja o HTML guia de configuração do modelo Para mais padrões. :::

:::observação HTML Envio de código versus upload de arquivo HTML Código só é válido quando Tipo de arquivo de modelo é HTMLPara Word, formulário PDF, mala direta ou Google Docs, use dados binários. Base64, ou URL em vez de. :::

Mapeamento de campos em todos os arquivos de dados

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

A amostra JSON inclui dois objetos em subInfo (PDF4me base 1000 e Pacote de Chamadas 2000). O {{#each subInfo}} blocos no HTML Renderizar uma linha de célula da tabela por item.

Visão geral do fluxo de trabalho

Teste mais rápido: colar HTML e JSON diretamente no PDF4me nó (não são necessários nós de arquivo).

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

Etapa	n8n nó	Propósito
1	Gatilho manual	Inicie o fluxo de trabalho sob demanda
2	PDF4me → Gerar documento (único)	Colar HTML Código + JSON Texto, saída renderizada HTML
3	Enviar e-mail ou Escrever arquivo binário (opcional)	Entregar ou economizar generated_document_output.html

Configuração de destino: colada HTML Código + JSON em Texto dos dados do documento + HTML saída

---

Passo 1: Baixe os arquivos de exemplo

1. Download invoice_sample_1.html e invoice_sample_data_1.json do Pacote de Arquivos de Amostra acima.
2. Abra ambos os arquivos em um editor de texto para que você possa copiar todo o conteúdo para o próximo arquivo. n8n nó.
3. Opcionalmente, faça o download. test.xml ou test.csv para testar XML ou CSV tipos de dados posteriormente.

---

Etapa 2: Crie o n8n Fluxo de trabalho

1. Em n8nCrie um novo fluxo de trabalho.
2. Adicionar um Gatilho manual nó.
3. Adicionar PDF4me → Gerar documento (único) após o gatilho.
4. Conecte seu PDF4me credencial.

Para produção, você pode adicionar um Ler arquivo binário nó em vez de HTML Código (ver Entrada de modelo alternativo abaixo).

---

Etapa 3: Configure o HTML Modelo (HTML Código)

Abra o PDF4me nó e defina os campos do modelo:

Campo	Valor
Tipo de arquivo de modelo	HTML
Tipo de saída	HTML (única opção para HTML modelos)
Tipo de entrada de arquivo de modelo	HTML Código
Nome do arquivo de modelo	invoice_sample_1.html
HTML Código	Cole o inteiro conteúdo de invoice_sample_1.html

:::dica Parcial HTML é OK Se o seu trecho omitir <html> ou <head>, o nó o envolve em um básico HTML shell automaticamente. O arquivo de exemplo é um documento completo, então cole-o como está. :::

---

Etapa 4: Configurar dados do documento (JSON)

Campo	Valor
Tipo de entrada de dados do documento	Texto
Tipo de dados do documento	JSON
Texto dos dados do documento	Cole o conteúdo completo de invoice_sample_data_1.json (ver bloco abaixo)

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

Configurações do nó principal (resumo)

Campo	Valor	Notas
Credencial para se conectar com	Seu PDF4me credencial	Pegar API chave
Recurso	Generate
Gerar operações	Gerar documento (único)
Nome da saída de dados binários	data (padrão)	A saída é HTML nesta propriedade binária

---

Etapa 5: Execute e verifique o HTML

1. Clique Executar fluxo de trabalho.
2. Abra o PDF4me Saída do nó. Em Binário, propriedade aberta data (generated_document_output.html).
3. Confirme se a fatura emitida mostra:
   • Destinatário → Test AG, cotext, Test Street 1/2, 8000 Zurique, Suíça
   • Comprador → Nome do comprador, Texto de entrega, Rua de teste 1/2
   • Metadados da fatura → Data de vencimento: 30/04/2025, Número da fatura: 123456, Emitida em: 01/04/2025
   • Itens de linha → PDF4me Base 1000 e Pacote de Chamadas 2000 com quantidades e IVA.
   • Saldo total → 124,31

Se um espaço reservado ficar em branco, verifique o caminho do mustache em relação ao seu. JSON. recipient.postalAddress.street1 O modelo exige a mesma estrutura aninhada nos dados.

---

Etapa 6: Enviar ou salvar a saída (opcional)

Enviar e-mail: mapear o PDF4me binário data como o HTML corpo (habilitar) HTML e-mail).

Escrever arquivo binário:

Campo	Valor
Nome do arquivo	invoice-output.html
Nome da propriedade de dados	data
Caminho de saída	Pasta onde n8n deve escrever o arquivo

---

Entrada de modelo alternativo: Carregar HTML do arquivo

Se preferir não colar HTML no nó:

1. Adicionar Ler arquivo binário antes PDF4me e aponte para invoice_sample_1.html.
2. Em PDF4me definir Tipo de entrada de arquivo de modelo para Dados binários, Propriedade binária do modelo para data, Nome do arquivo de modelo para invoice_sample_1.html.
3. Manter Tipo de entrada de dados do documento como Texto e cole o JSON como na Etapa 4.

Você também pode hospedar o .html em público URL e usar Tipo de entrada do arquivo de modelo: URL com Arquivo de modelo URL.

---

Formatos de dados alternativos

Opção A: JSON arquivo como binário (invoice_sample_data_1.json)

1. Adicionar Ler arquivo binário para o JSON arquivo (ou use um Fusão nó se o modelo também for binário).
2. Definir Tipo de entrada de dados do documento para Dados binários, Tipo de dados do documento para JSON, Propriedade binária do documento para o seu campo de dados, Nome do arquivo de dados do documento para invoice_sample_data_1.json.

Opção B: XML (test.xml)

Definir Tipo de dados do documento para XML e cole o conteúdo de 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>

Opção C: CSV (test.csv)

Definir Tipo de dados do documento para CSV e cole o CSV corpo. A amostra tem duas linhas de dados (um por subInfo item de linha); colunas de cabeçalho usam nomes simplificados como 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

---

Padrões de fluxo de trabalho de produção

Formas comuns de fornecer modelos HTML e dados em produção.Once the sample test works, replace the Manual Trigger with these patterns.

Enviar fatura por e-mail a partir do webhook

1. O webhook recebe a carga útil de faturamento.
2. PDF4me executa com fixo HTML Código modelo.
3. Webhook de mapa JSON para Texto dos dados do documento.
4. Enviar e-mail usa saída HTML como o corpo da mensagem.

Modelo do armazenamento em nuvem

1. Armazenamento Google Drive/S3 invoice_sample_1.html.
2. Baixar cargas de nós HTML em formato binário.
3. PDF4me: Tipo de entrada de arquivo de modelo = Dados binários.
4. Dados criados a partir de planilhas ou CRM como JSON.

Público URLs para modelo e dados

1. Hospedar .html e .json em público HTTPS URLs.
2. Definir Tipo de entrada de arquivo de modelo = URL e Tipo de entrada de dados do documento = URL.
3. Não são necessários nós de leitura de arquivo binário.

Perguntas frequentes

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.

Guias relacionados

• Visão geral da geração de documento (único): todos os parâmetros, campos de saída e tipos de modelo
• PDF4me Modelo do Word: Palavra .docx com <<[field]>> etiquetas e PDF saída
• Gerar HTML a partir do modelo em Make: mesmo padrão em Make

Back to overviewHTML template setup guide