Bagaimana Cara Menambahkan Header dan Footer HTML ke PDF di Make? Panduan 3 Langkah Tanpa Kode!

Jika Anda sudah menggunakan Membuat (sebelumnya Integromat) untuk mengotomatiskan alur kerja, menambahkan profesionalisme Header dan footer HTML Menambahkan header atau footer kustom ke PDF Anda sangat mudah: tiga modul, tanpa kode. Panduan ini menunjukkan kepada Anda cara tepat untuk menyiapkan skenario Make yang mengunduh PDF dari Dropbox, menambahkan header atau footer kustom Anda menggunakan PDF4me, dan mengunggah kembali file yang telah diberi merek. Anda akan menggunakan Tambahkan Header dan Footer HTML ke PDF Anda tinggal memasukkan tindakan dan menempelkan HTML Anda langsung ke Make, tidak perlu file header terpisah.

Alur Pembuatan Anda: 3 Modul, Satu Tujuan​

Skenario ini berjalan dalam tiga langkah: Dropbox, Unduh File → PDF4me, Tambahkan Header dan Footer HTML ke PDF → Dropbox, Unggah FileSetiap modul terhubung ke modul berikutnya, dan modul PDF4me adalah tempat Anda menentukan HTML header atau footer Anda.

Anda akan membutuhkan Dropbox koneksi (untuk membaca dan menulis file) dan sebuah PDF4me koneksi Anda (menggunakan milik Anda) Kunci APISetelah keduanya diatur, alur akan berjalan dari ujung ke ujung dalam hitungan detik.

File Masukan

File Keluaran

Langkah 1: Dropbox: Unduh File​

Mulailah dengan Dropbox modul dan pilih Unduh FileLangkah ini mengambil file PDF yang ingin Anda tambahkan header atau footer.

1. Tambahkan Dropbox modul → pilih Unduh File.
2. Koneksi (Wajib diisi): Pilih akun Dropbox Anda atau tambahkan yang baru.
3. Cara memilih file: Diatur ke Pilih sebuah berkas.
4. Mengajukan (Wajib diisi): Masukkan jalur lengkap ke PDF Anda, misalnya. / Blog Data / sample_3_page.pdfGunakan ikon folder untuk menelusuri Dropbox Anda jika diperlukan.

Klik MenyimpanModul ini menghasilkan konten file, yang akan Anda berikan ke PDF4me pada langkah selanjutnya.

Langkah 2: PDF4me: Tambahkan Header dan Footer HTML ke PDF​

Tambahkan PDF4me modul dan pilih Tambahkan Header dan Footer HTML ke PDFDi sini Anda menempelkan HTML Anda, mengatur lokasi (header atau footer), dan menyesuaikan margin.

1. Tambahkan PDF4me modul → pilih Tambahkan Header dan Footer HTML ke PDF.
2. Mengajukan (wajib): Petakan output dari Dropbox: Unduh File (file biner PDF).
3. Konten HTML (Wajib): Tempelkan HTML header atau footer Anda secara langsung. Contoh footer:

<div class="footer-column footer-right" style="flex:1;text-align:right;">
 <h4 style="margin:0 0 0.2rem 0;font-weight:600;font-size:10px;">Address - Switzerland</h4>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Joweid Zentrum 1 8630 Rüti</p>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Switzerland Tel: +41 41 500 20 09</p>
 <p style="margin:0;font-size:9px;">Email: [email protected]</p>
</div>

4. Lokasi (wajib): Pilih Judul atau Catatan kaki tergantung di mana Anda ingin meletakkan HTML-nya.
5. Lewati Halaman Pertama: TIDAK berlaku untuk semua halaman; Ya Jika Anda ingin melewati halaman pertama (misalnya, sampul).
6. Halaman: Diatur ke semua untuk menambahkan header/footer ke setiap halaman.
7. Margin (dalam mm): Manfaatkan milimeter (bukan piksel). Contoh nilai: Margin bawah 1, Margin kiri 2, Margin kanan 1. Pergi Margin atas Kosong kecuali jika Anda menggunakan header.

Klik MenyimpanPDF4me mengembalikan PDF bermerek, yang akan Anda unggah pada langkah 3.

Langkah 3: Dropbox: Unggah File​

Simpan PDF yang telah dimodifikasi kembali ke Dropbox menggunakan Dropbox, Unggah File.

1. Tambahkan Dropbox modul → pilih Unggah File.
2. Koneksi: Akun Dropbox yang sama seperti pada langkah 1.
3. Map (wajib): Jalur tempat output harus dikirim, misalnya. / Blog Data /.
4. Mengajukan (wajib): Petakan output dari PDF4me: Menambahkan Header dan Footer HTML ke PDFPilih PDF dari modul PDF4me, bukan Dari langkah Unduh, itu adalah file asli; Anda menginginkan file baru yang sudah ditambahkan header/footer.

Klik Menyimpan lalu jalankan skenarionya. PDF Anda akan diberi merek dan disimpan ke folder yang Anda pilih.

Contoh Cuplikan HTML: Salin & Gunakan di Make​

Ini Ramah PDF Cuplikan kode berfungsi di Make. Konten HTML kolom. Perluas blok mana pun di bawah ini untuk menyalin dan menempel, mengganti placeholder dengan teks Anda sendiri, atau membuat variabel.

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>

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;">Document title</td>
 <td style="width: 50%; text-align: right;">
 Author: Your Name | Date: 2025-11-12 | Page 1 of 5
 </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 class="footer-column footer-right" style="flex:1;text-align:right;">
 <h4 style="margin:0 0 0.2rem 0;font-weight:600;font-size:10px;">Your Company Name</h4>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Street Address City Postal</p>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Country Tel: +1 234 567 890</p>
 <p style="margin:0;font-size:9px;">Email: [email protected]</p>
</div>

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

Sebelum Anda Menempelkan HTML: Daftar Periksa Singkat​

API Tambah Header Footer HTML mengharapkan HTML biasa di dalam Konten HTML Untuk output PDF yang andal di Make:

• CSS inline: Menggunakan style="..." pada elemen. Lembar gaya eksternal tidak diterapkan di area header/footer.
• Tabel atau blok sederhanaGunakan <table> atau div dengan eksplisit width sehingga kolom tidak terbungkus atau berubah tata letak di PDF.
• SatuanPengaturan margin Make ada di milimeter (mm); di dalam HTML Anda dapat menggunakan px atau % untuk ukuran font dan tata letak.
• Uji coba terlebih dahuluTempelkan cuplikan kode Anda ke dalam Tambahkan Header dan Footer HTML ke PDF penguji dengan contoh PDF dan kunci API Anda sebelum menghubungkannya ke Make.

Logo Perusahaan, Footer Khusus Pelanggan, dan Lainnya​

Anda dapat menambahkan logo perusahaan di bagian header, Informasi footer yang berbeda untuk setiap pelanggan., dan kolom tambahan (nomor faktur, kode proyek, ID akun) dengan membuat HTML dari data Anda dan meneruskannya sebagai Konten HTML di dalam modul PDF4me.

Header dengan logo perusahaan​

Gunakan sebuah <img> tag dengan URL publik atau URI data Base64 sehingga logo muncul di bagian header atau footer.

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 80px; vertical-align: middle; padding-right: 12px;">
 <img src="https://your-domain.com/logo.png" alt="Logo" style="max-width: 72px; max-height: 36px; display: block;" />
 </td>
 <td style="vertical-align: middle;">
 <strong>Your Company Name</strong><br/>
 <span style="font-size: 9px; color: #666666;">Tagline or document type</span>
 </td>
 </tr>
</table>

Catatan kaki per pelanggan​

Saat Anda membuat PDF untuk beberapa pelanggan, buat HTML dari data pelanggan (nama, ID akun, referensi dokumen) dan teruskan ke modul PDF4me. Di Make, Anda dapat menggunakan data dari modul sebelumnya atau iterator untuk membuat HTML secara dinamis.

<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;">
 Prepared for: Customer Name | Account: ACC-12345 | Doc ref: INV-2025-001
 </td>
 </tr>
</table>

Di mana menggunakannya: Make vs API​

Anda dapat menambahkan header dan footer dengan dua cara:

1. MembuatGunakan Tambahkan modul Header Footer HTMLMasukkan PDF Anda ke dalam Mengajukan (dari Dropbox atau sumber lain), tempelkan HTML di Konten HTML, memilih Judul atau Catatan kaki, mengatur Halaman (misalnya. all), dan sesuaikan margin dalam mm.
2. API: Panggilan POST /api/v2/AddHtmlHeaderFooter dengan Konten dokumen (PDF Base64), Nama dokumen, htmlContent (HTML biasa), dan lokasi. Opsional: halaman, Lewati halaman pertama, dan parameter margin (dalam mm).

Kode HTML yang sama dapat digunakan di kedua tempat. Gunakan cuplikan kode dalam postingan ini di salah satu tempat tersebut.

Langkah Selanjutnya​

• Jalankan skenarioIkuti tiga langkah di atas, lalu tempelkan cuplikan kode ke dalam Konten HTML, dan jalankan alurnya.
• Coba API-nyaGunakan Tambahkan Header dan Footer HTML ke PDF penguji untuk melihat pratinjau HTML Anda dengan contoh PDF.
• Baca dokumentasi Make.: Tambahkan Header dan Footer HTML di Make untuk detail parameter selengkapnya.
• Referensi API lengkap: Menambahkan Header dan Footer HTML ke PDF (API PDF4me).