Dari PDF Biasa Menjadi PDF Bermerek: Tambahkan Header dan Footer HTML di n8n! (Tidak Perlu Penggabungan)

Jika Anda menggunakan n8n untuk otomatisasi, menambahkan Header dan footer HTML Menambahkan header atau footer kustom ke PDF Anda sangat mudah, hanya empat node, tanpa kode. Panduan ini menunjukkan cara menyiapkan alur kerja n8n yang mengunduh PDF dari Dropbox, menambahkan header atau footer kustom Anda menggunakan PDF4me, dan mengunggah kembali file yang sudah diberi merek. Anda cukup menempelkan HTML langsung ke dalamnya. Tambahkan header dan footer HTML ke PDF node, tidak memerlukan file header terpisah.

Apa yang Anda Butuhkan​

• n8n: Dihosting sendiri atau Awan n8nTambahkan node PDF4me dari panel node n8n.
• Kunci API PDF4me: Dapatkan kunci API PDF4me Anda (Gratis untuk memulai). Baru pertama kali? Ikuti Hubungkan PDF4me ke n8n.
• DropboxKami menggunakan Dropbox untuk mengunduh dan mengunggah. Anda dapat menggunakan Google Drive, OneDrive, atau node apa pun yang menyediakan input/output file biner. Ganti dengan node yang tepat, alurnya tetap sama.

Gambaran Alur Secara Singkat​

Alur kerja n8n Anda berjalan di empat node:

1. Pemicu: Saat mengklik 'Jalankan alur kerja' (manual) untuk pengujian, atau pemicu otomatis (misalnya Dropbox, webhook) ketika file baru muncul.
2. Unduh file (Dropbox): Mengambil PDF dari suatu jalur. Output masuk ke bidang biner (misalnya, data).
3. Tambahkan header dan footer HTML ke PDF (PDF4me): Mengambil data biner PDF, menempelkan HTML Anda, menerapkannya sebagai header atau footer. Menghasilkan PDF yang telah dimodifikasi ke bidang biner baru (misalnya, document).
4. Unggah file (Dropbox): Menyimpan PDF yang telah dimodifikasi ke dalam folder dengan nama yang Anda pilih.

Tidak ada langkah penggabungan, node Tambah Header Footer HTML langsung menghasilkan PDF baru. File yang sama, dengan merek yang sama; nama baru jika Anda mau.

Langkah 1: Picu + Unduh File​

Tambahkan pemicu dan Dropbox Unduh file Node untuk memuat PDF ke dalam alur kerja.

1. Tambahkan pemicu: Saat mengklik 'Jalankan alur kerja' untuk pengujian, atau misalnya Dropbox dipicu saat sebuah file dibuat.
2. Tambahkan Unduh file (Dropbox)

• Kredensial untuk terhubung dengan: Akun Dropbox Anda.
• Sumber: Berkas | OperasiUnduh.
• Jalur File: Jalur lengkap ke PDF Anda, misalnya. /Blog Data/sample_3_page.pdf.
• Masukkan File Output ke dalam Kolom: data (atau nama lain, Anda akan merujuknya di node berikutnya).

Jalankan node tersebut. Outputnya akan mencakup... 1 barang dengan PDF di dalamnya data Bidang biner.

Langkah 2: Tambahkan Header dan Footer HTML ke PDF​

Tambahkan PDF4me simpul dan pilih Edit → Tambahkan Header dan Footer HTML ke PDFTempelkan kode HTML Anda, atur lokasi (header atau footer), dan margin.

1. Tambahkan node PDF4me → Edit → Tambahkan Header dan Footer HTML ke PDF.
2. Kredensial untuk terhubung dengan: Akun PDF4me Anda.
3. Tipe Data MasukanData Biner.
4. Bidang Biner Masukan: data (sama seperti node Unduh) Masukkan File Output ke dalam Kolom).
5. Konten HTML (Wajib): Tempelkan HTML header atau footer Anda. Contoh:

<div style="width:100%; font-family: Segoe UI, Arial, sans-serif; color:#333; padding:12px 18px 8px 18px; box-sizing:border-box;">
 <table style="width:100%; border-collapse:collapse;">
 <tr>
 <td>Your Company Name</td>
 <td style="text-align:right;">Document Title | Page {{page}} of {{total}}</td>
 </tr>
 </table>
</div>

6. Lokasi: Judul atau Catatan kaki.
7. Halaman: all atau kisaran seperti 1-3 (halaman 1 sampai 3).
8. Lewati Halaman PertamaMatikan untuk menerapkan ke semua halaman; Aktifkan untuk melewati halaman pertama.
9. Margin (Px): n8n menggunakan piksel. Contoh: Margin Kiri 5, Margin Kanan 5, Margin Atas 10, Margin Bawah 10.
10. Nama File Output: contohnya document_with_html_header_footer.pdf.
11. Nama Dokumen: contohnya document.pdf (referensi sumber).
12. Nama Keluaran Data Biner: document (kolom yang akan dibaca oleh node Unggah).

Jalankan node tersebut. Outputnya mencakup PDF yang telah dimodifikasi di dalamnya. document bidang biner (ukuran file meningkat, misalnya 2,54 kB → 70,3 kB).

Langkah 3: Unggah File​

Simpan PDF yang telah dimodifikasi kembali ke Dropbox.

1. Tambahkan Unggah file (Dropbox)

• Kredensial untuk terhubung dengan: Akun Dropbox yang sama.
• Sumber: Berkas | Operasi: Mengunggah.
• Jalur File: Jalur lengkap termasuk nama file, contoh: /Blog Data/Header_Added_Output.pdf.
• File Biner: Pada.
• Bidang Biner Masukan: document (dari node Tambah header footer HTML). Jangan gunakan data, itu adalah PDF aslinya.

Jalankan alur kerja. File tersebut Header_Added_Output.pdf (atau nama pilihan Anda) akan muncul di Dropbox dengan header atau footer yang diterapkan.

Contoh Cuplikan HTML: Salin & Gunakan di n8n​

Ini Ramah PDF cuplikan berfungsi di dalam Konten HTML kolom. Perluas blok mana pun di bawah ini untuk menyalin dan menempel.

Judul​

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;"></td>
 <td style="width: 50%; text-align: right; vertical-align: top;">
 Author: Per Nordqvist<br/>
 Date: 2025-11-12<br/>
 Revision: 4.24
 </td>
 </tr>
</table>

<div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #333333;">Document Title - Confidential</div>

Catatan kaki​

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">Confidential. For internal use only. All rights reserved.</td>
 </tr>
</table>

<div style="text-align: center; font-family: Arial, sans-serif; font-size: 10px;">Page {{page}} of {{total}}</div>

Sebelum Anda Menempelkan HTML: Daftar Periksa Singkat​

• CSS inline: Menggunakan style="..." pada elemen. Lembar gaya eksternal tidak diterapkan.
• Tabel atau blok sederhana: Menggunakan <table> atau div dengan eksplisit width untuk tata letak yang stabil.
• SatuanPengaturan margin n8n ada di piksel (Px)Di dalam HTML, gunakan px atau %.
• Uji coba terlebih dahuluTempelkan cuplikan kode Anda ke dalam Tambahkan Header dan Footer HTML ke PDF tester sebelum menyambungkannya ke n8n.

Di mana menggunakannya: n8n vs Make vs Power Automate vs API​

1. n8nGunakan alur di atas: Unduh → Tambahkan header dan footer HTML ke PDF → Unggah. Margin di piksel.
2. Membuat: Tambahkan Header dan Footer HTML di Make. Margin di milimeter.
3. Power Automate: Menambahkan Header dan Footer HTML di Power AutomateMenggunakan file header terpisah dari Dropbox.
4. API: Panggilan POST /api/v2/AddHtmlHeaderFooter dengan Konten dokumen, Nama dokumen, htmlContent, Dan lokasi.

Kode HTML yang sama dapat digunakan di mana saja.

Langkah Selanjutnya​

• Jalankan alur kerjaIkuti tiga langkah di atas, lalu tempelkan cuplikan kode ke dalam Konten HTML, dan laksanakan.
• Coba API-nyaGunakan Tambahkan Header dan Footer HTML ke PDF penguji untuk melihat pratinjau HTML Anda.
• Baca dokumentasi n8n: Tambahkan Header dan Footer HTML ke PDF (n8n) untuk parameter lengkap.
• Referensi API lengkap: Menambahkan Header dan Footer HTML ke PDF (API PDF4me).