返回主指南：所有模板类型、节点参数和输出字段

HTML 模板

本指南涵盖的内容

本指南将引导您完成单个对象的渲染过程。 HTML 发票 在 n8n 使用 invoice_sample_1.html 和 invoice_sample_data_1.json该模板使用 胡子语法 （{{recipient.name}}， {{#each subInfo}}）。 HTML 是 仅有的 支持粘贴原始标记的模板类型 HTML 代码输出结果为 HTML 仅有的 （非常适合用于电子邮件正文或网页预览）。

开始之前

HTML 带有胡子标签的模板

样本 invoice_sample_1.html 是一个包含嵌套路径的完整发票布局（{{recipient.postalAddress.street1}}）和行项目循环（{{#each subInfo}}路径必须与您的 JSON 结构完全匹配。

匹配数据文件

使用 invoice_sample_data_1.json （受到推崇的）， 测试.xml，或者 测试.csv。 JSON 使用嵌套对象和 子信息 大批。 CSV 将字段展平，每行使用一个项目。

PDF4me 证书 n8n

创建一个 PDF4me 证书 n8n 并粘贴你的 API 密钥。同一个密钥适用于所有设备。 PDF4me 实例中的节点。

→ 获取您的 API 钥匙

示例文件包

请下载以下全部四个文件。 HTML 模板加上三种数据格式，发票内容相同。

invoice_sample_1.html

全额发票 HTML 带有胡须标签

invoice_sample_data_1.json

嵌套 JSON 使用 subInfo 数组（推荐）

示例文件包含哪些内容

模板布局（`invoice_sample_1.html`）

该示例是一个样式化的 HTML 发票 （表格、标志、 PDF4me 卖家模块）。动态部分：

文档部分	静态内容（固定在模板中）	胡子占位符（根据数据填充）
收件人地址	（仅布局）	`{{recipient.name}}`， `{{coText}}`， `{{recipient.postalAddress.*}}`
卖家阻挠	PDF4me苏黎世，dev.pdf4me.com	（静止的）
买家/送货	买家标签	`{{buyer.name}}`， `{{coTextDelivery}}`， `{{buyer.postalAddress.*}}`
发票元数据	到期日、发票号码、签发日期标签	`{{dueDate}}`， `{{invoiceNumber}}`， `{{issuedOn}}`
项目表	产品、周期、数量、价格、增值税、总计标题	`{{#each subInfo}}` … `{{plan}}`， `{{quantity}}`， `{{vat}}`， `{{totalPrice}}`
时期栏	（每张发票仅限一个范围）	`{{periodStart}}` - `{{periodEnd}}`
总行	总余额标签	`{{totalAmount}}`

:::提示 Mustache 语法（HTML 仅有的） HTML 模板的使用 {{fieldName}} 和 {{object.nestedKey}}重复行项目 {{#each subInfo}} … {{/each}}这与 Word 模板不同，Word 模板使用 <<[fieldName]>>参见 HTML 模板设置指南更多图案。

:::

：：：笔记 HTML 代码上传 vs 文件上传 HTML 代码 仅在以下情况下有效 模板文件类型 是 HTML对于 Word、PDF 表单、邮件合并或 Google 文档，请使用二进制数据。 Base64，或者 URL 反而。：：：

所有数据文件中的字段映射

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

样本 JSON 包括二对象 subInfo （PDF4me 基本套餐 1000 和通话套餐 2000）。 {{#each subInfo}} 积木 HTML 每个项目渲染一行表格单元格。

工作流程概览

最快测试：粘贴 HTML 和 JSON 直接在 PDF4me 节点（不需要文件节点）。

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

步	n8n 节点	目的
1	手动扳机	按需启动工作流程
2	PDF4me → 生成文档（单个）	粘贴 HTML 代码 + JSON 文本，输出渲染 HTML
3	发送电子邮件或者写入二进制文件（选修的）	交付或节省 `generated_document_output.html`

生成文档（单个）n8n 节点配置为：模板文件类型 HTML，输出类型 HTML，模板文件输入类型 HTML 代码，文档数据输入类型文本，文档数据类型 JSON — 目标配置：已粘贴 **HTML 代码** + JSON 在 **文档数据文本** + HTML 输出

步骤 1：下载示例文件

下载 invoice_sample_1.html 和 invoice_sample_data_1.json 从示例文件包多于。
用文本编辑器打开这两个文件，以便将全部内容复制到其中。 n8n 节点。
（可选）下载 test.xml 或者 test.csv 测试 XML 或者 CSV 稍后会介绍数据类型。

步骤 2：创建 n8n 工作流程

在 n8n创建一个新的工作流程。
添加一个 手动扳机 节点。
添加 PDF4me → 生成文档（单个） 触发之后。
连接您的 PDF4me 凭证。

对于生产，您可以添加一个 读取二进制文件 节点而不是 HTML 代码（见）备选模板输入以下）。

步骤 3：配置 HTML 模板（HTML 代码）

打开 PDF4me 节点并设置模板字段：

场地	价值
模板文件类型	HTML
输出类型	HTML （唯一选项） HTML （模板）
模板文件输入类型	HTML 代码
模板文件名	`invoice_sample_1.html`
HTML 代码	粘贴全部的内容 `invoice_sample_1.html`

:::提示部分 HTML 是 OK 如果你的代码片段省略了 <html> 或者 <head>该节点将其包装在一个基本结构中 HTML 自动执行 shell 命令。示例文件是一个完整的文档，请直接粘贴。

:::

步骤 4：配置文档数据（JSON）

场地	价值
文档数据输入类型	文本
文档数据类型	JSON
文档数据文本	粘贴全部内容 `invoice_sample_data_1.json` （见下方方框）

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

核心节点设置（摘要）

场地	价值	笔记
用于连接的凭证	你的 PDF4me 凭证	得到 API 钥匙
资源	`Generate`
生成操作	生成文档（单个）
二进制数据输出名称	`data` （默认）	输出结果为 HTML 在这个二元属性中

步骤 5：执行并验证 HTML

点击 执行工作流程。
打开 PDF4me 节点输出。 二进制开放属性 data （generated_document_output.html）。
确认生成的发票显示：
- 接受者 → Test AG，cotext，Test Street 1/2，8000 苏黎世，瑞士
- 买方 → 买家姓名、送货文字、测试街道 1/2
- 发票元数据 → 到期日 2025年4月30日，发票编号 123456，开票日期 2025年4月1日
- 项目 → PDF4me 基础1000和呼叫套餐2000，包含数量和增值税
- 总余额 → 124.31

如果占位符显示为空白，请检查 Mustache 路径是否与您的路径匹配。 JSON。 recipient.postalAddress.street1 模板中要求数据具有相同的嵌套结构。

步骤 6：发送或保存输出（可选）

发送电子邮件： 地图 PDF4me 二进制 data 作为 HTML 主体（启用） HTML 电子邮件）。

写入二进制文件：

场地	价值
文件名	`invoice-output.html`
数据属性名称	`data`
输出路径	文件夹所在位置 n8n 应该写入文件

备选模板输入：加载 HTML 来自文件

如果您不想粘贴 HTML 进入节点：

添加 读取二进制文件 前 PDF4me 并指向 invoice_sample_1.html。
在 PDF4me 放 模板文件输入类型 到 二进制数据， 模板二进制属性 到 data， 模板文件名 到 invoice_sample_1.html。
保持 文档数据输入类型 作为文本并粘贴 JSON 如步骤 4 所示。

你也可以主持 .html 在公共场合 URL 并使用 模板文件输入类型： URL 和 模板文件 URL。

替代数据格式

选项A： JSON 文件为二进制文件（`invoice_sample_data_1.json`）

添加 读取二进制文件 为了 JSON 文件（或使用）合并如果模板也是二进制的，则需要添加节点）。
放 文档数据输入类型 到 二进制数据， 文档数据类型 到 JSON， 文档二进制属性 添加到您的数据字段中， 文档数据文件名 到 invoice_sample_data_1.json。

选项B： XML （`test.xml`）

放 文档数据类型 到 XML 并粘贴以下内容 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>

选项C： CSV （`test.csv`）

放 文档数据类型 到 CSV 并粘贴 CSV 主体。样本有 两行数据 （每人一个） subInfo 行项目）；标题列使用扁平化名称，例如 recipient_name 和 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

生产工作流程模式

生产环境中提供 HTML 模板和数据的常用方法Once the sample test works, replace the Manual Trigger with these patterns.

通过 webhook 发送电子邮件发票

Webhook 接收计费数据。
PDF4me 运行固定 HTML 代码 模板。
地图 webhook JSON 到 文档数据文本。
发送电子邮件 使用输出 HTML 作为邮件正文。

来自云存储的模板

Google 云端硬盘/S3 存储 invoice_sample_1.html。
下载节点负载 HTML 以二进制形式。
PDF4me： 模板文件输入类型 = 二进制数据。
由表格或数据构建 CRM 作为 JSON。

民众 URLs 用于模板和数据

主持人 .html 和 .json 在公共场合 HTTPS URLs。
放 模板文件输入类型 = URL 和 文档数据输入类型 = URL。
无需读取二进制文件节点。

常见问题解答

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.

开始之前​

示例文件包​

示例文件包含哪些内容​

模板布局（invoice_sample_1.html）​

所有数据文件中的字段映射​

工作流程概览​

步骤 1：下载示例文件​

步骤 2：创建 n8n 工作流程​

步骤 3：配置 HTML 模板 （HTML 代码）​

步骤 4：配置文档数据（JSON）​

核心节点设置（摘要）​

步骤 5：执行并验证 HTML​

步骤 6：发送或保存输出（可选）​

备选模板输入：加载 HTML 来自文件​

替代数据格式​

选项A： JSON 文件为二进制文件（invoice_sample_data_1.json）​

选项B： XML （test.xml）​

选项C： CSV （test.csv）​

生产工作流程模式​

常见问题解答​

相关指南​