Lewati ke konten utama
API PDF4meIntegrasiBasis PengetahuanEkstensiPenguji APIBlog
Buat Dokumen (Tunggal)

Kembali ke panduan utama: semua tipe templat, parameter node, dan kolom keluaran.

HTML templat

Apa yang dibahas dalam panduan ini?

Panduan ini akan memandu Anda melalui proses rendering satu gambar. HTML faktur di dalam n8n menggunakan invoice_sample_1.html Dan invoice_sample_data_1.jsonTemplat ini menggunakan... sintaks kumis ({{recipient.name}}, {{#setiap subInfo}}). HTML adalah hanya tipe templat yang mendukung penempelan markup mentah di HTML KodeOutputnya adalah HTML hanya (ideal untuk isi email atau pratinjau web).

Postingan Blog Terkait
Belum ada postingan blog untuk fitur ini — akan segera hadir.
Sementara itu, jelajahi blog PDF4me untuk menemukan tutorial dan alur kerja di berbagai platform.
Kunjungi blog ini →

Sebelum Anda Mulai​

HTML templat dengan tag kumis
Sampel invoice_sample_1.html adalah tata letak faktur lengkap dengan jalur bersarang ({{recipient.postalAddress.street1}}) dan perulangan item baris ({{#setiap subInfo}}). Jalur harus sama persis dengan struktur JSON Anda.
File data yang cocok
Menggunakan invoice_sample_data_1.json (direkomendasikan), test.xml, atau test.csv. JSON menggunakan objek bersarang dan sebuah subInfo susunan. CSV Meratakan kolom dan menggunakan satu baris per item baris.
PDF4me kredensial dalam n8n
Buat PDF4me kredensial dalam n8n dan tempelkan milik Anda API kunci. Kunci yang sama berlaku untuk semua PDF4me node di instance Anda.

Paket File Sampel​

Unduh keempat file di bawah ini. Satu HTML template ditambah tiga format data dengan konten faktur yang sama.

Apa Isi File Sampel Tersebut?​

Tata letak templat (invoice_sample_1.html)​

Sampel ini ditata HTML faktur (tabel, logo, PDF4me (blok penjual). Bagian dinamis:

Bagian dokumenKonten statis (tetap dalam templat)Tempat penampung kumis (diisi dari data)
Alamat penerima(hanya tata letak){{recipient.name}}, {{coText}}, {{recipient.postalAddress.*}}
Blok penjualPDF4meZurich, dev.pdf4me.com(statis)
Pembeli / pengirimanLabel pembeli{{buyer.name}}, {{coTextDelivery}}, {{buyer.postalAddress.*}}
Meta fakturTanggal Jatuh Tempo, Nomor Faktur, Diterbitkan Pada label{{dueDate}}, {{invoiceNumber}}, {{issuedOn}}
Tabel item barisHeader Produk, Periode, Kuantitas, Harga, PPN, Total{{#each subInfo}} … {{plan}}, {{quantity}}, {{vat}}, {{totalPrice}}
Kolom periode(satu rentang per faktur){{periodStart}} - {{periodEnd}}
Jumlah barisLabel saldo total{{totalAmount}}
Sintaks kumis (HTML hanya)

HTML templat yang digunakan {{fieldName}} Dan {{object.nestedKey}}Ulangi item baris dengan {{#each subInfo}} … {{/each}}Ini berbeda dengan templat Word, yang menggunakan <<[fieldName]>>Lihat HTML panduan pengaturan templat untuk pola lainnya.

:::catatan HTML Unggahan kode vs unggahan file HTML Kode hanya berlaku jika Jenis File Templat adalah HTMLUntuk Word, Formulir PDF, Mail Merge, atau Google Docs, gunakan Data Biner. Base64, atau URL alih-alih. :::

Pemetaan bidang di seluruh berkas data​

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

Sampel JSON termasuk dua objek di dalam subInfo (PDF4me (paket dasar 1000 dan Paket Panggilan 2000). {{#each subInfo}} blok di dalam HTML Tampilkan satu baris sel tabel untuk setiap item.

Alur Kerja Secara Singkat​

Tes tercepat: tempel HTML Dan JSON langsung di dalam PDF4me node (tidak memerlukan node file).

Manual Trigger  →  PDF4me Generate Document (Single)  →  (optional) Send Email / Write Binary File
Melangkahn8n simpulTujuan
1Pemicu ManualMulai alur kerja sesuai permintaan
2PDF4me → Buat Dokumen (Tunggal)Tempel HTML Kode + JSON Teks, hasil yang ditampilkan HTML
3Kirim Email atau Tulis File Biner (opsional)Kirim atau simpan generated_document_output.html
Node n8n yang dikonfigurasi dengan Tipe File Template HTML, Tipe Output HTML, Tipe Input File Template Kode HTML, Tipe Input Data Dokumen Teks, Tipe Data Dokumen JSON

Konfigurasi target: disalin HTML Kode + JSON di dalam Teks Data Dokumen + HTML keluaran

Langkah 1: Unduh File Contoh​

  1. Unduh invoice_sample_1.html Dan invoice_sample_data_1.json dari Paket File Sampel di atas.
  2. Buka kedua file tersebut di editor teks agar Anda dapat menyalin seluruh isinya ke dalam n8n simpul.
  3. Unduh secara opsional test.xml atau test.csv untuk menguji XML atau CSV tipe data nanti.

Langkah 2: Buat n8n Alur kerja​

  1. Di dalam n8n, buat alur kerja baru.
  2. Tambahkan Pemicu Manual simpul.
  3. Menambahkan PDF4me → Buat Dokumen (Tunggal) setelah pemicunya.
  4. Hubungkan milik Anda PDF4me kredensial.

Untuk produksi, Anda dapat menambahkan Baca File Biner simpul sebagai pengganti HTML Kode (lihat Masukan templat alternatif di bawah).

Langkah 3: Konfigurasi HTML Templat (HTML Kode)​

Buka PDF4me node dan atur kolom template:

BidangNilai
Jenis File TemplatHTML
Jenis KeluaranHTML (satu-satunya pilihan untuk HTML templat)
Tipe Input File TemplatHTML Kode
Nama File Templatinvoice_sample_1.html
HTML KodeTempelkan seluruh isi dari invoice_sample_1.html
Sebagian HTML adalah OK

Jika cuplikan Anda menghilangkan... <html> atau <head>, node tersebut membungkusnya dalam bentuk dasar. HTML shell secara otomatis. File contoh adalah dokumen lengkap, jadi tempelkan apa adanya.

Langkah 4: Konfigurasi Data Dokumen (JSON)​

BidangNilai
Jenis Input Data DokumenTeks
Jenis Data DokumenJSON
Teks Data DokumenSalin seluruh isi dari invoice_sample_data_1.json (lihat blok di bawah)
{
  "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"
}

Pengaturan node inti (ringkasan)​

BidangNilaiCatatan
Kredensial untuk terhubung denganMilikmu PDF4me kredensialMendapatkan API kunci
SumberGenerate
Menghasilkan OperasiBuat Dokumen (Tunggal)
Nama Keluaran Data Binerdata (bawaan)Outputnya adalah HTML dalam properti biner ini

Langkah 5: Jalankan dan Verifikasi HTML​

  1. Klik Jalankan alur kerja.
  2. Buka PDF4me keluaran node. Di bawah Binerproperti terbuka data (generated_document_output.html).
  3. Konfirmasikan bahwa faktur yang diterbitkan menunjukkan:
    • Penerima → Test AG, cotext, Test Street 1/2, 8000 Zurich, Swiss
    • Pembeli → nama pembeli, Teks pengiriman, Jalan Uji 1/2
    • Meta faktur → Tanggal Jatuh Tempo 2025-04-30, Nomor Faktur 123456, Diterbitkan Pada 2025-04-01
    • Item baris → PDF4me basis 1000 dan Paket Panggilan 2000 dengan kuantitas dan PPN
    • Saldo total → 124.31

Jika placeholder kosong, periksa jalur kumis terhadap milik Anda. JSON. recipient.postalAddress.street1 Dalam templat tersebut, diperlukan struktur bersarang yang sama pada data.

Langkah 6: Kirim atau Simpan Output (Opsional)​

Kirim Email: petakan PDF4me biner data sebagai HTML tubuh (aktifkan) HTML email).

Tulis File Biner:

BidangNilai
Nama Fileinvoice-output.html
Nama Properti Datadata
Jalur KeluaranFolder tempat n8n harus menulis file

Input Templat Alternatif: Muat HTML dari File​

Jika Anda lebih suka tidak menempelkan HTML ke dalam simpul:

  1. Menambahkan Baca File Biner sebelum PDF4me dan arahkan ke invoice_sample_1.html.
  2. Di dalam PDF4me mengatur Tipe Input File Templat ke Data Biner, Properti Biner Templat ke data, Nama File Templat ke invoice_sample_1.html.
  3. Menyimpan Jenis Input Data Dokumen sebagai Teks dan tempelkan JSON seperti pada Langkah 4.

Anda juga dapat menjadi tuan rumah .html di tempat umum URL dan menggunakan Tipe Input File Templat: URL dengan File Templat URL.

Format Data Alternatif​

Opsi A: JSON berkas sebagai biner (invoice_sample_data_1.json)​

  1. Menambahkan Baca File Biner untuk JSON berkas (atau gunakan Menggabungkan node jika templatnya juga biner).
  2. Mengatur Jenis Input Data Dokumen ke Data Biner, Jenis Data Dokumen ke JSON, Properti Biner Dokumen ke kolom data Anda, Nama File Data Dokumen ke invoice_sample_data_1.json.

Opsi B: XML (test.xml)​

Mengatur Jenis Data Dokumen ke XML lalu tempelkan isi dari 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>

Opsi C: CSV (test.csv)​

Mengatur Jenis Data Dokumen ke CSV dan tempelkan CSV tubuh. Sampel tersebut memiliki dua baris data (satu per subInfo item baris); kolom header menggunakan nama yang diratakan seperti recipient_name Dan 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

Pola Alur Kerja Produksi​

Cara umum untuk menyediakan template HTML dan data dalam produksiOnce the sample test works, replace the Manual Trigger with these patterns.
Faktur email dari webhook
  1. Webhook menerima muatan data penagihan.
  2. PDF4me berjalan dengan tetap HTML Kode templat.
  3. Webhook peta JSON ke Teks Data Dokumen.
  4. Kirim Email menggunakan output HTML sebagai isi pesan.
Templat dari penyimpanan cloud
  1. Google Drive / Penyimpanan S3 invoice_sample_1.html.
  2. Unduh beban node HTML sebagai biner.
  3. PDF4me: Tipe Input File Templat = Data Biner.
  4. Data yang dibuat dari Spreadsheet atau CRM sebagai JSON.
Publik URLs untuk templat dan data
  1. Tuan rumah .html Dan .json di depan umum HTTPS URLs.
  2. Mengatur Tipe Input File Templat = URL Dan Jenis Input Data Dokumen = URL.
  3. Tidak diperlukan node Read Binary File.

Pertanyaan yang Sering Diajukan​

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.

Panduan Terkait​

Back to overviewHTML template setup guide