メインコンテンツへスキップ
PDF4me API統合AIとSDK知識ベース拡張機能APIテスターブログ
ドキュメント生成（単一）

メインガイドに戻る：すべてのテンプレートタイプ、ノードパラメータ、および出力フィールド

HTML テンプレート

このガイドの内容

このガイドでは、単一のレンダリングの手順を説明します。 HTML 請求書 で n8n 使用 invoice_sample_1.html そして invoice_sample_data_1.jsonテンプレートは 口ひげ構文 （{{recipient.name}}、 {{#each subInfo}}) HTML は のみ 生のマークアップを貼り付けることをサポートするテンプレートタイプ HTML コード出力は HTML のみ （メール本文やウェブプレビューに最適です。）

関連ブログ記事
この機能に関するブログ記事はまだありません。近日公開予定です。
その間、PDF4me ブログを閲覧して、あらゆるプラットフォームのチュートリアルやワークフローをご覧ください。
ブログをご覧ください →

始める前に​

HTML 口ひげタグ付きテンプレート
サンプル invoice_sample_1.html ネストされたパスを含む完全な請求書レイアウトです（{{recipient.postalAddress.street1}}）と項目ループ（{{#each subInfo}}パスはJSON構造と完全に一致する必要があります。
一致するデータファイル
使用 invoice_sample_data_1.json （推奨）、 test.xml、 または テスト.csv。 JSON ネストされたオブジェクトと サブ情報 配列。 CSV フィールドをフラット化し、1行につき1行を使用します。
PDF4me 資格情報 n8n
作成する PDF4me 資格情報 n8n そしてあなたの API キー。同じキーがすべての場所で機能します PDF4me インスタンス内のノード。

サンプルファイルパック​

以下の4つのファイルをすべてダウンロードしてください。 HTML テンプレートに加え、同じ請求書内容を持つ3種類のデータ形式。

サンプルファイルの内容​

テンプレートレイアウト（invoice_sample_1.html）​

サンプルはスタイル付きです HTML 請求書 （表、ロゴ、 PDF4me 販売者ブロック）。動的セクション：

ドキュメントセクション静的コンテンツ（テンプレートに固定）口ひげのプレースホルダー（データから入力）
受取人の住所（レイアウトのみ）{{recipient.name}}、 {{coText}}、 {{recipient.postalAddress.*}}
販売者ブロックPDF4meチューリッヒ、pdf4me.com（静的）
購入者／配達購入者ラベル{{buyer.name}}、 {{coTextDelivery}}、 {{buyer.postalAddress.*}}
請求書メタ支払期日、請求書番号、発行日ラベル{{dueDate}}、 {{invoiceNumber}}、 {{issuedOn}}
明細項目表製品、期間、数量、価格、VAT、合計のヘッダー{{#each subInfo}} … {{plan}}、 {{quantity}}、 {{vat}}、 {{totalPrice}}
期間列（請求書1枚につき1つの範囲）{{periodStart}} - {{periodEnd}}
合計行数合計金額ラベル{{totalAmount}}
マスタッシュ構文（HTML のみ）

HTML テンプレートの使用 {{fieldName}} そして {{object.nestedKey}}繰り返し項目 {{#each subInfo}} … {{/each}}これは、Word テンプレートとは異なり、 <<[fieldName]>>. 参照 HTML テンプレート設定ガイドその他のパターンはこちら。

HTML コードアップロードとファイルアップロードの比較

HTML コード 有効なのは、 テンプレートファイルの種類 は HTMLWord、PDFフォーム、メールマージ、またはGoogleドキュメントの場合は、バイナリデータを使用します。 Base64、 または URLその代わり。

すべてのデータファイルにわたるフィールドマッピング​

HTML placeholderJSON path (invoice_sample_data_1.json)XML element (test.xml)CSV column (test.csv)Sample value
{{recipient.name}}recipient.nameRecipient/Namerecipient_nameTest AG
{{coText}}coTextCoTextcoTextcotext
{{recipient.postalAddress.street1}}recipient.postalAddress.street1Recipient/PostalAddress/Street1recipient_street1Test Street1
{{recipient.postalAddress.street2}}recipient.postalAddress.street2Recipient/PostalAddress/Street2recipient_street2Test Street2
{{recipient.postalAddress.zipCode}} {{city}}recipient.postalAddress.zipCode, .cityRecipient/PostalAddress/ZipCode, Cityrecipient_zipCode, recipient_city8000 Zurich
{{recipient.postalAddress.country}}recipient.postalAddress.countryRecipient/PostalAddress/Countryrecipient_countrySwitzerland
{{buyer.name}}buyer.nameBuyer/Namebuyer_namebuyer name
{{coTextDelivery}}coTextDeliveryCoTextDeliverycoTextDeliveryDelivery text
{{buyer.postalAddress.street1}}buyer.postalAddress.street1Buyer/PostalAddress/Street1buyer_street1Test Street1
{{buyer.postalAddress.street2}}buyer.postalAddress.street2Buyer/PostalAddress/Street2buyer_street2Test Street2
{{dueDate}}dueDateDueDatedueDate2025-04-30
{{invoiceNumber}}invoiceNumberInvoiceNumberinvoiceNumber123456
{{issuedOn}}issuedOnIssuedOnissuedOn2025-04-01
{{periodStart}} - {{periodEnd}}periodStart, periodEndPeriodStart, PeriodEndperiodStart, periodEnd2025-03-01 to 2025-03-31
{{#each subInfo}} {{plan}}subInfo[].planSubInfo/Item/PlanplanPDF4me base 1000
{{quantity}}subInfo[].quantitySubInfo/Item/Quantityquantity1
{{vat}}subInfo[].vatSubInfo/Item/Vatvat2.83
{{totalPrice}}subInfo[].totalPriceSubInfo/Item/TotalPricetotalPrice37.83
{{totalAmount}}totalAmountTotalAmounttotalAmount124.31

サンプル JSON 含まれる 二 オブジェクト subInfo （PDF4me 基本料金1000ドル、通話パッケージ料金2000ドル）。 {{#each subInfo}} ブロック HTML アイテムごとにテーブルセルの行を1つレンダリングします。

ワークフローの概要​

最速のテスト：ペースト HTML そして JSON 直接 PDF4me ノード（ファイルノードは不要）。

Manual Trigger  →  PDF4me Generate Document (Single)  →  (optional) Send Email / Write Binary File
ステップn8n ノード目的
1手動トリガーワークフローをオンデマンドで開始
2PDF4me → ドキュメント生成（単一）ペースト HTML コード + JSON テキスト、出力レンダリング HTML
3メールを送信する または バイナリファイルを書き込む （任意）配達または保存 generated_document_output.html
ドキュメント生成（単一）n8nノードは、テンプレートファイルタイプHTML、出力タイプHTML、テンプレートファイル入力タイプHTMLコード、ドキュメントデータ入力タイプテキスト、ドキュメントデータタイプJSONで構成されています。

ターゲット構成: 貼り付け済み HTML コード + JSON で 文書データテキスト + HTML 出力

ステップ1：サンプルファイルをダウンロードする​

  1. ダウンロード invoice_sample_1.html そして invoice_sample_data_1.json から サンプルファイルパック その上。
  2. 両方のファイルをテキストエディタで開き、内容全体をコピーします。 n8n ノード。
  3. オプションでダウンロード test.xml または test.csv テストする XML または CSV データ型については後ほど。

ステップ2： n8n ワークフロー​

  1. で n8n新しいワークフローを作成します。
  2. 追加する 手動トリガー ノード。
  3. 追加 PDF4me → ドキュメント生成（単一） トリガー作動後。
  4. 接続 PDF4me 資格情報。

生産には、 バイナリファイルを読み込む ノードの代わりに HTML コード（参照） 代替テンプレート入力 下に）。

ステップ3： HTML テンプレート （HTML コード）​

開く PDF4me ノードを設定し、テンプレートフィールドを設定します。

分野価値
テンプレートファイルの種類HTML
出力タイプHTML （唯一の選択肢） HTML テンプレート）
テンプレートファイル入力タイプHTML コード
テンプレートファイル名invoice_sample_1.html
HTML コード貼り付ける 全体 内容 invoice_sample_1.html
部分的HTML は OK

スニペットに以下が省略されている場合 <html> または <head>ノードはそれを基本的な HTMLシェルが自動的に実行します。サンプルファイルは完全なドキュメントなので、そのまま貼り付けてください。

ステップ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​

  1. クリック ワークフローを実行する。
  2. 開く PDF4me ノード出力。 バイナリオープンな物件 data （generated_document_output.html)
  3. 発行された請求書に以下の内容が記載されていることを確認してください。
    • 受賞者 → Test AG、cotext、Test Street 1/2、8000 チューリッヒ、スイス
    • 買い手 → 購入者名、配送テキスト、テストストリート1/2
    • 請求書メタ → 支払期限 2025-04-30、請求書番号 123456、発行日 2025-04-01
    • 明細項目 → PDF4me 基本料金1000と通話パッケージ2000（数量とVAT込み）
    • 合計残高 → 124.31

プレースホルダーが空白で表示される場合は、口ひげのパスをあなたの JSON。 recipient.postalAddress.street1 テンプレートでは、データにも同じネスト構造が必要です。

ステップ6：出力結果を送信または保存する（オプション）​

メール送信： 地図 PDF4me バイナリ data として HTML 本体（有効にする） HTML メール）。

バイナリファイルを書き込む:

分野価値
ファイル名invoice-output.html
データプロパティ名data
出力パスフォルダー n8n ファイルを書き込む必要があります

代替テンプレート入力: ロード HTML ファイルから​

貼り付けたくない場合は HTML ノードへ:

  1. 追加 バイナリファイルを読み込む 前に PDF4me そしてそれを指して invoice_sample_1.html。
  2. で PDF4me セット テンプレートファイル入力タイプ に バイナリデータ、 テンプレートバイナリプロパティ に data、 テンプレートファイル名 に invoice_sample_1.html。
  3. 保つ ドキュメントデータ入力タイプ として 文章 そして貼り付け JSON ステップ4と同様です。

また、 .html 公の場で URL そして使用する テンプレートファイル入力タイプ: URL と テンプレートファイル URL。

代替データ形式​

選択肢A： JSON バイナリファイルとして(invoice_sample_data_1.json）​

  1. 追加 バイナリファイルを読み込む のために JSON ファイル (または マージ テンプレートがバイナリの場合、ノードも必要になります。
  2. セット ドキュメントデータ入力タイプ に バイナリデータ、 文書データタイプ に 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 本体。サンプルには 2つのデータ行 （1人につき1つ） 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.
ウェブフックから請求書をメールで送信
  1. Webhookが課金ペイロードを受信します。
  2. PDF4me 固定で実行 HTML コード テンプレート。
  3. マップウェブフック JSON に 文書データテキスト。
  4. メールを送信する 出力を使用する HTML メッセージ本文として。
クラウドストレージからのテンプレート
  1. Googleドライブ/S3ストア invoice_sample_1.html。
  2. ダウンロードノードの読み込み HTML バイナリとして。
  3. PDF4me: テンプレートファイル入力タイプ = バイナリデータ。
  4. スプレッドシートから作成されたデータまたは CRM として JSON。
公共 URLs テンプレートとデータについて
  1. ホスト .html そして .json 公共の場で HTTPS URLs。
  2. セット テンプレートファイル入力タイプ = URL そして ドキュメントデータ入力タイプ = URL。
  3. バイナリファイル読み取りノードは不要です。

よくある質問​

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.

関連ガイド​

Back to overviewHTML template setup guide