←Generar documento (único)

Volver a la guía principal: todos los tipos de plantillas, parámetros de nodo y campos de salida.

HTML plantilla

Qué abarca esta guía

Esta guía te muestra cómo renderizar un solo HTML factura en n8n usando factura_ejemplo_1.html y invoice_sample_data_1.jsonLa plantilla utiliza sintaxis del bigote ({{recipient.name}}, {{#each subInfo}}). HTML es el solo tipo de plantilla que admite pegar marcado sin formato en HTML Código. La salida es HTML solo (Ideal para el cuerpo de correos electrónicos o vistas previas web).

Entradas de blog relacionadas

Aún no hay ninguna entrada de blog sobre esta función; estará disponible próximamente.

Mientras tanto, echa un vistazo al blog de PDF4me para encontrar tutoriales y flujos de trabajo para todas las plataformas.

Visita el blog →

Antes de comenzar

HTML plantilla con etiquetas de bigote

La muestra factura_ejemplo_1.html es un diseño de factura completo con rutas anidadas ({{destinatario.dirección.postal.calle1}}) y un bucle de elementos de línea ({{#each subInfo}}Las rutas deben coincidir exactamente con la estructura JSON.

Archivo de datos coincidente

Usar invoice_sample_data_1.json (recomendado), test.xml, o prueba.csv. JSON utiliza objetos anidados y un subInfo matriz. CSV Aplana los campos y utiliza una fila por cada partida.

PDF4me credencial en n8n

Crear un PDF4me credencial en n8n y pega tu API clave. La misma clave funciona en todos PDF4me nodos en su instancia.

→ Consigue tu API llave

Paquete de archivos de muestra

Descarga los cuatro archivos a continuación. Uno HTML Plantilla más tres formatos de datos con el mismo contenido de factura.

factura_ejemplo_1.html

Factura completa HTML con etiquetas de bigote

invoice_sample_data_1.json

Anidado JSON con matriz subInfo (recomendado)

test.xml

Los mismos datos de factura que XML

prueba.csv

Aplanado CSV (dos filas de artículos)

¿Qué contienen los archivos de muestra?

Diseño de plantilla (invoice_sample_1.html)

La muestra es un estilo HTML factura (tablas, logotipo, PDF4me Bloque del vendedor). Secciones dinámicas:

Sección de documentos	Contenido estático (fijo en la plantilla)	Marcador de posición de bigote (rellenado con datos)
Dirección del destinatario	(solo diseño)	{{recipient.name}}, {{coText}}, {{recipient.postalAddress.*}}
Bloqueo del vendedor	PDF4meZúrich, dev.pdf4me.com	(estático)
Comprador / entrega	Etiqueta del comprador	{{buyer.name}}, {{coTextDelivery}}, {{buyer.postalAddress.*}}
Metadatos de la factura	Fecha de vencimiento, número de factura, fecha de emisión en las etiquetas	{{dueDate}}, {{invoiceNumber}}, {{issuedOn}}
Tabla de partidas individuales	Encabezados: Producto, Periodo, Cantidad, Precio, IVA, Total	{{#each subInfo}} … {{plan}}, {{quantity}}, {{vat}}, {{totalPrice}}
Columna de período	(un único rango por factura)	{{periodStart}} - {{periodEnd}}
Fila total	Etiqueta de equilibrio total	{{totalAmount}}

Sintaxis de bigote (HTML solo)

HTML Las plantillas utilizan {{fieldName}} y {{object.nestedKey}}. Repetir los elementos de la línea con {{#each subInfo}} … {{/each}}Esto es diferente de las plantillas de Word, que utilizan <<[fieldName]>>. Ver el HTML Guía de configuración de plantillas Para más patrones.

:::nota HTML Código vs. carga de archivos HTML Código es válido solo cuando Tipo de archivo de plantilla es HTMLPara Word, formularios PDF, combinación de correspondencia o Google Docs, utilice datos binarios. Base64, o URL en cambio. :::

Mapeo de campos en todos los archivos de datos

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

La muestra JSON incluye dos objetos en subInfo (PDF4me base 1000 y paquete de llamadas 2000). {{#each subInfo}} bloques en el HTML Renderiza una fila de celda de tabla por cada elemento.

El flujo de trabajo de un vistazo

Prueba más rápida: pegar HTML y JSON directamente en el PDF4me nodo (no se requieren nodos de archivo).

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

Paso	n8n nodo	Objetivo
1	Disparador manual	Inicie el flujo de trabajo bajo demanda.
2	PDF4me → Generar documento (único)	Pegar HTML Código + JSON Texto, salida renderizada HTML
3	Enviar correo electrónico o Escribir archivo binario (opcional)	Entregar o guardar generated_document_output.html

Configuración de destino: pegada HTML Código + JSON en Texto de los datos del documento + HTML producción

---

Paso 1: Descargue los archivos de muestra.

1. Descargar invoice_sample_1.html y invoice_sample_data_1.json del Paquete de archivos de muestra arriba.
2. Abra ambos archivos en un editor de texto para que pueda copiar todo el contenido en el n8n nodo.
3. Opcionalmente, descárguelo. test.xml o test.csv para probar XML o CSV tipos de datos más adelante.

---

Paso 2: Crear el n8n Flujo de trabajo

1. En n8n, crear un nuevo flujo de trabajo.
2. Agregar un Disparador manual nodo.
3. Agregar PDF4me → Generar documento (único) después del disparador.
4. Conecta tu PDF4me credencial.

Para la producción puedes agregar un Leer archivo binario nodo en lugar de HTML Código (ver Entrada de plantilla alternativa abajo).

---

Paso 3: Configurar el HTML Plantilla (HTML Código)

Abrir el PDF4me nodo y configurar los campos de la plantilla:

Campo	Valor
Tipo de archivo de plantilla	HTML
Tipo de salida	HTML (única opción para HTML plantillas)
Tipo de entrada de archivo de plantilla	HTML Código
Nombre del archivo de plantilla	invoice_sample_1.html
HTML Código	Pegue el completo contenido de invoice_sample_1.html

:::consejo Parcial HTML es OK Si tu fragmento omite <html> o <head>, el nodo lo envuelve en un básico HTML La consola se ejecutará automáticamente. El archivo de ejemplo es un documento completo, así que péguelo tal cual.

:::

---

Paso 4: Configurar los datos del documento (JSON)

Campo	Valor
Tipo de entrada de datos del documento	Texto
Tipo de datos del documento	JSON
Texto de los datos del documento	Pegue el contenido completo de invoice_sample_data_1.json (ver el bloque a continuación)

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

Configuración del nodo principal (resumen)

Campo	Valor	Notas
Credencial para conectarse con	Su PDF4me credencial	Conseguir API llave
Recurso	Generate
Generar operaciones	Generar documento (único)
Nombre de salida de datos binarios	data (por defecto)	La salida es HTML en esta propiedad binaria

---

Paso 5: Ejecutar y verificar el HTML

1. Haga clic Ejecutar flujo de trabajo.
2. Abrir el PDF4me Salida del nodo. Bajo Binario, propiedad abierta data (generated_document_output.html).
3. Confirme que la factura emitida muestre:
   • Beneficiario → Test AG, cotext, Test Street 1/2, 8000 Zúrich, Suiza
   • Comprador → Nombre del comprador, Texto de entrega, Calle de prueba 1/2
   • Metadatos de la factura → Fecha de vencimiento 30/04/2025, Número de factura 123456, Emitida el 01/04/2025
   • partidas → PDF4me Base 1000 y Paquete de Llamada 2000 con cantidades e IVA
   • Saldo total → 124.31

Si un marcador de posición se muestra en blanco, compruebe la ruta del bigote con respecto a su JSON. recipient.postalAddress.street1 La plantilla requiere la misma estructura anidada en los datos.

---

Paso 6: Enviar o guardar el resultado (opcional)

Enviar correo electrónico: mapear el PDF4me binario data como el HTML cuerpo (habilitar HTML correo electrónico).

Escribir archivo binario:

Campo	Valor
Nombre del archivo	invoice-output.html
Nombre de la propiedad de datos	data
Ruta de salida	Carpeta donde n8n debería escribir el archivo

---

Entrada de plantilla alternativa: Cargar HTML desde archivo

Si prefiere no pegar HTML en el nodo:

1. Agregar Leer archivo binario antes PDF4me y apuntarle invoice_sample_1.html.
2. En PDF4me colocar Tipo de entrada de archivo de plantilla a Datos binarios, Propiedad binaria de plantilla a data, Nombre del archivo de plantilla a invoice_sample_1.html.
3. Mantener Tipo de entrada de datos del documento como Texto y pegar el JSON como en el paso 4.

También puedes ser el anfitrión .html en un público URL y usar Tipo de entrada de archivo de plantilla: URL con Archivo de plantilla URL.

---

Formatos de datos alternativos

Opción A: JSON archivo como binario (invoice_sample_data_1.json)

1. Agregar Leer archivo binario para el JSON archivo (o utilice un Unir nodo si la plantilla también es binaria).
2. Colocar Tipo de entrada de datos del documento a Datos binarios, Tipo de datos del documento a JSON, Propiedad binaria del documento a su campo de datos, Nombre del archivo de datos del documento a invoice_sample_data_1.json.

Opción B: XML (test.xml)

Colocar Tipo de datos del documento a XML y pegar el contenido 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>

Opción C: CSV (test.csv)

Colocar Tipo de datos del documento a CSV y pegar el CSV cuerpo. La muestra tiene dos filas de datos (uno por subInfo elemento de línea); las columnas de encabezado usan nombres aplanados como recipient_name y 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

---

Patrones de flujo de trabajo de producción

Métodos comunes para proporcionar plantillas HTML y datos en producción.Once the sample test works, replace the Manual Trigger with these patterns.

Enviar factura por correo electrónico desde un webhook

1. El webhook recibe la carga útil de facturación.
2. PDF4me funciona con corregido HTML Código plantilla.
3. Webhook de mapa JSON a Texto de los datos del documento.
4. Enviar correo electrónico utiliza la salida HTML como el cuerpo del mensaje.

Plantilla desde almacenamiento en la nube

1. Almacenamiento en Google Drive/S3 factura_ejemplo_1.html.
2. Descarga de cargas de nodos HTML como binario.
3. PDF4me: Tipo de entrada de archivo de plantilla = Datos binarios.
4. Datos generados a partir de Hojas de cálculo o CRM como JSON.

Público URLs para plantillas y datos

1. Anfitrión .html y .json en público HTTPS URLs.
2. Colocar Tipo de entrada de archivo de plantilla = URL y Tipo de entrada de datos del documento = URL.
3. No se requieren nodos de lectura de archivos binarios.

Preguntas frecuentes

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.

Guías relacionadas

• Descripción general de la generación de documentos (individuales): todos los parámetros, campos de salida y tipos de plantilla
• PDF4me Plantilla de Word: Palabra .docx con <<[field]>> etiquetas y PDF producción
• Generar HTML desde la plantilla en Make: mismo patrón en Make

Back to overviewHTML template setup guide