Aller au contenu principal
API PDF4meIntégrationsBase de connaissancesExtensionsTesteur d'APIBlog
Générer un document (unique)

Retour au guide principal : tous les types de modèles, les paramètres de nœuds et les champs de sortie

HTML modèle

Ce guide couvre

Ce guide vous accompagne dans le rendu d'un seul HTML facture dans n8n en utilisant exemple_de_facture_1.html et invoice_sample_data_1.jsonLe modèle utilise syntaxe de Mustache ({{nom du destinataire}}, {{#cha sous-info}}). HTML est le seulement type de modèle qui prend en charge le collage de code HTML brut dans HTML CodeLe résultat est HTML seulement (Idéal pour les corps de courriels ou les aperçus Web).

Articles de blog connexes
Il n'y a pas encore d'article de blog consacré à cette fonctionnalité — à venir prochainement.
En attendant, n'hésitez pas à consulter le blog de PDF4me pour découvrir des tutoriels et des procédures de travail adaptés à toutes les plateformes.
Consultez le blog →

Avant de commencer​

HTML modèle avec balises moustache
L'échantillon exemple_de_facture_1.html est une mise en page de facture complète avec des chemins imbriqués ({{recipient.postalAddress.street1}}) et une boucle d'élément de ligne ({{#cha sous-info}}Les chemins d'accès doivent correspondre exactement à votre structure JSON.
Fichier de données correspondant
Utiliser invoice_sample_data_1.json (recommandé), test.xml, ou test.csv. JSON utilise des objets imbriqués et un sous-info tableau. CSV aplatit les champs et utilise une ligne par élément de ligne.
PDF4me diplôme en n8n
Créer un PDF4me diplôme en n8n et collez votre API clé. La même clé fonctionne pour tout PDF4me nœuds dans votre instance.

Pack de fichiers d'exemple​

Téléchargez les quatre fichiers ci-dessous. Un HTML modèle plus trois formats de données avec le même contenu de facture.

Que contiennent les fichiers d'exemple ?​

Modèle de mise en page (invoice_sample_1.html)​

L'échantillon est stylisé HTML facture (tableaux, logo, PDF4me bloc vendeur). Sections dynamiques :

Section DocumentsContenu statique (fixé dans le modèle)Espace réservé à la moustache (rempli à partir des données)
Adresse du destinataire(mise en page uniquement){{recipient.name}}, {{coText}}, {{recipient.postalAddress.*}}
Blocage du vendeurPDF4meZurich, dev.pdf4me.com(statique)
Acheteur / livraisonÉtiquette de l'acheteur{{buyer.name}}, {{coTextDelivery}}, {{buyer.postalAddress.*}}
Métadonnées de la factureDate d'échéance, numéro de facture, étiquette d'émission{{dueDate}}, {{invoiceNumber}}, {{issuedOn}}
Tableau des articlesEn-têtes : Produit, Période, Quantité, Prix, TVA, Total{{#each subInfo}} … {{plan}}, {{quantity}}, {{vat}}, {{totalPrice}}
Colonne de période(une seule plage par facture){{periodStart}} - {{periodEnd}}
Ligne totaleÉtiquette de solde total{{totalAmount}}
Syntaxe Mustache (HTML seulement)

HTML Les modèles utilisent {{fieldName}} et {{object.nestedKey}}. Répétez les éléments de ligne avec {{#each subInfo}} … {{/each}}Cela diffère des modèles Word, qui utilisent <<[fieldName]>>Voir le HTML guide de configuration du modèle Pour plus de modèles.

HTML Téléchargement de code ou de fichier

HTML Code n'est valable que lorsque Type de fichier modèle est HTMLPour Word, les formulaires PDF, le publipostage ou Google Docs, utilisez des données binaires. Base64, ou URL plutôt.

Cartographie des champs dans tous les fichiers de données​

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

L'échantillon JSON comprend deux objets dans subInfo (PDF4me base 1000 et forfait d'appel 2000). {{#each subInfo}} blocs dans le HTML Afficher une ligne de tableau par élément.

Aperçu du flux de travail​

Test le plus rapide : coller HTML et JSON directement dans le PDF4me nœud (aucun nœud de fichier requis).

Manual Trigger  →  PDF4me Generate Document (Single)  →  (optional) Send Email / Write Binary File
Étapen8n nœudBut
1Déclencheur manuelDémarrer le flux de travail à la demande
2PDF4me → Générer un document (unique)Pâte HTML Code + JSON Texte, rendu HTML
3Envoyer un e-mail ou Écrire un fichier binaire (facultatif)Livrer ou économiser generated_document_output.html
Générer un document (unique) : nœud n8n configuré avec les paramètres suivants : type de fichier modèle HTML, type de sortie HTML, type d'entrée du fichier modèle code HTML, type d'entrée des données du document texte, type de données du document JSON.

Configuration cible : collée HTML Code + JSON dans Texte des données du document + HTML sortir

Étape 1 : Télécharger les fichiers d’exemple​

  1. Télécharger invoice_sample_1.html et invoice_sample_data_1.json de la Pack de fichiers d'exemple au-dessus de.
  2. Ouvrez les deux fichiers dans un éditeur de texte afin de pouvoir copier l'intégralité de leur contenu dans le n8n nœud.
  3. Téléchargement facultatif test.xml ou test.csv tester XML ou CSV types de données plus tard.

Étape 2 : Créer le n8n Flux de travail​

  1. Dans n8n, créez un nouveau flux de travail.
  2. Ajouter un Déclencheur manuel nœud.
  3. Ajouter PDF4me → Générer un document (unique) après le déclencheur.
  4. Connectez votre PDF4me titre.

Pour la production, vous pouvez ajouter un Lire le fichier binaire nœud au lieu de HTML Code (voir Modèle d'entrée alternatif ci-dessous).

Étape 3 : Configurer HTML Modèle (HTML Code)​

Ouvrez le PDF4me nœud et définir les champs du modèle :

ChampValeur
Type de fichier modèleHTML
Type de sortieHTML (seule option pour HTML modèles)
Type de fichier modèleHTML Code
Nom du fichier modèleinvoice_sample_1.html
HTML CodeCollez le entier contenu de invoice_sample_1.html

:::conseil partiel HTML est OK Si votre extrait omet <html> ou <head>, le nœud l'encapsule dans un nœud de base HTML Le script s'ouvre automatiquement. Le fichier d'exemple est un document complet ; collez-le tel quel.

:::

Étape 4 : Configurer les données du document (JSON)​

ChampValeur
Type de saisie de données du documentTexte
Type de données du documentJSON
Texte des données du documentCollez l'intégralité du contenu de invoice_sample_data_1.json (voir bloc ci-dessous)
{
  "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"
}

Paramètres du nœud principal (résumé)​

ChampValeurNotes
Identifiant pour se connecter avecTon PDF4me titreObtenir API clé
RessourceGenerate
Générer des opérationsGénérer un document (unique)
Nom de la sortie de données binairesdata (défaut)Le résultat est HTML dans cette propriété binaire

Étape 5 : Exécuter et vérifier HTML​

  1. Cliquez Exécuter le flux de travail.
  2. Ouvrez le PDF4me Sortie du nœud. Sous Binaire, propriété ouverte data (generated_document_output.html).
  3. Veuillez vérifier que la facture rendue indique :
    • Destinataire → Test AG, cotext, Test Street 1/2, 8000 Zurich, Suisse
    • Acheteur → Nom de l'acheteur, Texte de livraison, Rue de test 1/2
    • Métadonnées de la facture → Date d'échéance : 30/04/2025, Numéro de facture : 123456, Date d'émission : 01/04/2025
    • Ligne de commande → PDF4me Base 1000 et forfait d'appel 2000 avec quantités et TVA
    • Solde total → 124,31

Si un espace réservé s'affiche vide, vérifiez le chemin Mustache par rapport à votre JSON. recipient.postalAddress.street1 Le modèle exige la même structure imbriquée dans les données.

Étape 6 : Envoyer ou enregistrer le résultat (facultatif)​

Envoyer un courriel : cartographier PDF4me binaire data comme le HTML corps (activer) HTML e-mail).

Écrire un fichier binaire :

ChampValeur
Nom de fichierinvoice-output.html
Nom de la propriété de donnéesdata
Chemin de sortieDossier où n8n devrait écrire le fichier

Modèle d'entrée alternatif : Charger HTML à partir du fichier​

Si vous préférez ne pas coller HTML dans le nœud :

  1. Ajouter Lire le fichier binaire avant PDF4me et le diriger vers invoice_sample_1.html.
  2. Dans PDF4me ensemble Type de fichier modèle à Données binaires, Propriété binaire du modèle à data, Nom du fichier modèle à invoice_sample_1.html.
  3. Garder Type de saisie de données du document comme Texte et collez le JSON comme à l'étape 4.

Vous pouvez également héberger le .html dans un public URL et utiliser Type d'entrée de fichier modèle : URL avec Fichier modèle URL.

Formats de données alternatifs​

Option A : JSON fichier en tant que binaire (invoice_sample_data_1.json)​

  1. Ajouter Lire le fichier binaire pour le JSON fichier (ou utilisez un Fusionner nœud si le modèle est également binaire).
  2. Ensemble Type de saisie de données du document à Données binaires, Type de données du document à JSON, Propriété binaire du document à votre champ de données, Nom du fichier de données du document à invoice_sample_data_1.json.

Option B : XML (test.xml)​

Ensemble Type de données du document à XML et collez le contenu 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>

Option C : CSV (test.csv)​

Ensemble Type de données du document à CSV et collez le CSV corps. L'échantillon a deux lignes de données (un par subInfo élément de ligne) ; les colonnes d'en-tête utilisent des noms aplatis comme recipient_name et 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

Modèles de flux de production​

Méthodes courantes de fourniture de modèles HTML et de données en productionOnce the sample test works, replace the Manual Trigger with these patterns.
Facture envoyée par webhook
  1. Le webhook reçoit les données de facturation.
  2. PDF4me s'exécute avec des exécutions fixes HTML Code modèle.
  3. Webhook de carte JSON à Texte des données du document.
  4. Envoyer un e-mail utilise la sortie HTML comme corps du message.
Modèle provenant du stockage cloud
  1. Google Drive / Magasins S3 exemple_de_facture_1.html.
  2. Chargement des nœuds de téléchargement HTML en binaire.
  3. PDF4me: Type de fichier modèle = Données binaires.
  4. Données issues de Sheets ou CRM comme JSON.
Publique URLs pour le modèle et les données
  1. Hôte .html et .json en public HTTPS URLs.
  2. Ensemble Type de fichier modèle = URL et Type de saisie de données du document = URL.
  3. Aucun nœud de lecture de fichier binaire requis.

Foire aux questions​

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.

Guides associés​

Back to overviewHTML template setup guide