Lewati ke konten utama
API PDF4meIntegrasiBasis PengetahuanEkstensiPenguji APIBlog

Tambahkan Logo dan Metadata Anda di Setiap Halaman PDF menggunakan Header & Footer HTML melalui Power Automate!

· Satu menit membaca
Sankalp Mishra
SEO and Content Writer

Tambahkan logo perusahaan, metadata dokumen (penulis, tanggal, revisi), atau footer khusus pelanggan Ubah file PDF Anda menggunakan Power Automate, tanpa perlu kode. Panduan ini akan memandu Anda melalui prosesnya. alur lengkap 5 langkah (pemicu → dapatkan PDF → dapatkan file header → Tambahkan Header dan Footer HTML ke PDF → buat file) dengan tangkapan layar untuk setiap langkah, Kemudian contoh cuplikan HTML Anda dapat menyalin dan menggunakannya untuk branding, nomor halaman, dan footer per pelanggan, serta kasus penggunaan seperti header laporan dan template yang dapat digunakan kembali.

Berikut alur lengkapnya di Power Automate: pemicu → Dapatkan file PDF menggunakan jalur (Dropbox) → Dapatkan konten file header menggunakan jalur (Dropbox) → Tambahkan Header dan Footer HTML ke PDF (PDF4me) → Buat berkas (Dropbox). Setiap nama langkah dan parameter di bawah ini sesuai dengan UI pada tangkapan layar.

Alur Power Automate: Pemicu → Dapatkan file PDF → Dapatkan konten header file → Tambahkan header dan footer HTML ke PDF → Buat file

Sebelum dan sesudah: PDF input adalah dokumen sederhana (misalnya, “Contoh Dokumen PDF Halaman 1…”). Setelah alur kerja selesai, PDF yang sama akan memiliki header HTML yang berisi tipe dokumen, ID, judul, penulis, tanggal, dan revisi, semuanya diambil dari file header Anda.

Masukkan PDF

Masukkan PDF sebelum menambahkan header: dokumen contoh biasa

Output PDF

Output PDF dengan header HTML: Tipe Dokumen, ID, Judul, Penulis, Tanggal, Revisi

Langkah 1: Picu alur​

Menambahkan Memicu alur secara manual (untuk pengujian) atau pemicu lain (misalnya, saat file dibuat di dalam folder). Tidak ada parameter yang perlu diatur.

Langkah 2: Dapatkan file PDF menggunakan jalur (Dropbox)​

Langkah ini memuat PDF yang ingin Anda tambahkan header atau footer.

  1. Tambahkan tindakan → Dropbox → Dapatkan isi file (atau tindakan yang mengambil file berdasarkan jalur; di tangkapan layar itu adalah Dapatkan file PDF menggunakan jalur).
  2. Parameter (diverifikasi dari tangkapan layar):
  • Jalur File (Wajib diisi): Jalur lengkap ke file PDF Anda di Dropbox, misalnya: /pdf4metest/add html header footer to pdf/sample_3_page.pdfGunakan ikon folder untuk menelusuri jika diperlukan.
  • Membuka Parameter lanjutan → atur Menentukan Jenis Konten ke Ya.
  1. Di bagian bawah: Terhubung ke Dropbox. Menggunakan Ubah referensi koneksi Jika Anda perlu mengganti akun.
Dapatkan file PDF menggunakan jalur: Jalur File, Infer Content Type Ya, Dropbox

Langkah 3: Dapatkan konten file header menggunakan jalur (Dropbox)​

Langkah ini memuat HTML untuk header (atau footer) Anda. Simpan HTML yang kompatibel dengan PDF Anda dalam sebuah file (misalnya, . Header.html) di Dropbox dan bacalah di sini.

  1. Tambahkan tindakan → Dropbox → Dapatkan isi file (atau Dapatkan konten file header menggunakan jalur (seperti pada tangkapan layar).
  2. Parameter (diverifikasi dari tangkapan layar):
  • Jalur File (Wajib diisi): Jalur ke file HTML Anda, misalnya. /pdf4metest/add html header footer to pdf/Header.html.
  • Parameter lanjutan → Menentukan Jenis Konten: Ya.
  1. Terhubung ke Dropbox. di bagian bawah.
Dapatkan konten file header menggunakan jalur: File Path Header.html, Infer Content Type Yes, Dropbox

Ini adalah langkah intinya: proses ini mengambil PDF dan HTML lalu menghasilkan PDF baru dengan header (atau footer) yang sudah diterapkan.

  1. Tambahkan aksi → PDF4me → Tambahkan Header dan Footer HTML ke PDF.
  2. Parameter (diverifikasi dari tangkapan layar):
  • Isi File (wajib): Pilih output dari Dapatkan file PDF menggunakan jalur (file biner PDF dari langkah 2).
  • Nama File: contohnya Test.pdf (atau nama PDF sumber Anda).
  • Konten HTML (wajib): Pilih output dari Dapatkan konten file header menggunakan jalur (HTML dari langkah 3).
  • Lokasi: Judul (atau Catatan kaki (jika Anda menambahkan footer).
  • Halaman: semua Jadi, header/footer diterapkan ke setiap halaman.
  • Lewati Halaman Pertama: TIDAK Jika Anda juga menginginkan header di halaman pertama; atur ke Ya untuk melewatkannya.
  • Margin Atas (px): contohnya 15 (piksel). Tinggalkan Margin Kiri, Margin Kanan, Dan Margin Bawah Kosongkan atau atur sesuai kebutuhan.
  1. Di bagian bawah: Terhubung ke PDF4me. Gunakan milikmu Kunci API PDF4me saat membuat koneksi.
Tambahkan Header dan Footer HTML ke PDF: Konten File dari Dapatkan PDF, Konten HTML dari Dapatkan Header, Header Lokasi, Semua Halaman, Margin Atas 15, PDF4me

Langkah 5: Buat file (Dropbox)​

Simpan PDF yang dihasilkan dari langkah Tambah Header Footer HTML ke Dropbox (atau folder lain).

  1. Tambahkan tindakan → Dropbox → Buat berkas.
  2. Parameter (diverifikasi dari tangkapan layar):
  • Jalur Folder (wajib): contohnya /pdf4metest/add html header footer to pdf.
  • Nama File (wajib): contohnya Test_Output.pdf.
  • Isi File (wajib): Pilih keluaran dari Tambahkan Header dan Footer HTML ke PDF (PDF yang telah dimodifikasi). Jangan gunakan output dari Get PDF, itu adalah file asli; file baru adalah file yang dihasilkan dari tindakan PDF4me.
  1. Terhubung ke Dropbox. di bagian bawah.
Buat file: Jalur Folder, Nama File Test_Output.pdf, Konten File dari Tambahkan Header Footer HTML, Dropbox

Jalankan alurnya. Anda akan melihat file baru (misalnya...). Test_Output.pdf) di dalam folder tempat header atau footer HTML diterapkan. Untuk referensi tindakan selengkapnya, lihat Menambahkan Header dan Footer HTML ke PDF di Power Automate.

Contoh Cuplikan HTML: Salin & Uji​

Gunakan ini Ramah PDF cuplikan di dalam Tambahkan Penguji API Header Footer HTML atau Power Automate. Perluas cuplikan kode di bawah ini untuk melihat dan menyalinnya.: menjaga daftar tetap singkat sampai Anda membutuhkannya.

Judul​

Dua kolom (Penulis, Tanggal, Revisi)Right column stays aligned; replace text with your own or flow variables.
<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>
Header dengan nomor halamanUse placeholders {{page}} and {{total}} in the HTML; PDF4me replaces them per page.
<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>
Garis tunggal sederhana yang berpusat
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #333333;">Document Title - Confidential</div>
Tiga kolom (kiri / tengah / kanan)Logo area, title, date/revision.
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 25%; vertical-align: middle;">[Logo]</td>
 <td style="width: 50%; text-align: center; vertical-align: middle;">Project Report 2025</td>
 <td style="width: 25%; text-align: right; vertical-align: middle;">2025-11-12 | v1.0</td>
 </tr>
</table>
Header dengan garis bawah
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 12px; border-bottom: 1px solid #cccccc;">
 <tr>
 <td style="padding: 4px 0;">Technical Specification</td>
 <td style="text-align: right; padding: 4px 0;">Revision 4.24</td>
 </tr>
</table>
Judul dua baris + subjudul
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif;">
 <tr>
 <td style="font-size: 14px; font-weight: bold;">Quarterly Report Q4 2025</td>
 </tr>
 <tr>
 <td style="font-size: 10px; color: #666666;">Prepared by Finance Team</td>
 </tr>
</table>
Hanya metadata yang rata kanan.
<div style="text-align: right; font-family: Arial, sans-serif; font-size: 10px;">Author: Jane Doe<br/>Date: 2025-11-12<br/>Doc ref: DR-2025-001</div>
Judul kiri + revisi kanan (satu baris)
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 70%; vertical-align: top;">Contract Agreement</td>
 <td style="width: 30%; text-align: right; vertical-align: top;">Revision 4.24 | 2025-11-12</td>
 </tr>
</table>
Header berwarna (misalnya merah)Centered colored text.
<div style="text-align: center; font-family: Arial; font-size: 12px; color: #FF0000;">Document Header PDF4me</div>

Catatan kaki​

Hukum / rahasia
<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>
Nomor halaman sajaUse placeholders in flow for dynamic "Page X of Y".
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 10px;">Page 1 of 5</div>
Catatan kecil
<div style="font-family: Arial, sans-serif; font-size: 8px; color: #888888; text-align: center;">This document is provided as-is. No warranty.</div>

Sebelum Anda mengirim HTML: daftar periksa​

API Tambah Header Footer HTML mengharapkan HTML biasa di dalam htmlContent (bukan Base64). Untuk output PDF yang andal:

  • CSS inline, Menggunakan gaya="..." pada elemen. API mendukung CSS inline; stylesheet eksternal tidak diterapkan di area header/footer.
  • Tabel atau blok sederhanaGunakan <tabel> atau div dengan eksplisit lebar (misalnya. lebar: 50%) sehingga kolom tidak akan mengalami perubahan tata letak atau pembungkusan di mesin PDF.
  • Tata LetakUntuk hasil yang dapat diprediksi, gunakan tata letak berbasis tabel atau blok dengan lebar yang eksplisit; banyak mesin PDF menangani hal ini dengan baik.
  • Satuan, Menggunakan px atau % untuk ukuran font dan margin; parameter margin API dalam piksel.
  • Uji coba terlebih dahulu, Tempelkan cuplikan kode Anda ke dalam Tambahkan Header dan Footer HTML ke PDF penguji dengan contoh PDF dan kunci API Anda sebelum menggunakannya di Power Automate atau alur kerja lainnya.
Uji di lingkungan pengembangan Anda

Tempelkan cuplikan di atas ke dalam htmlContent bidang Tambahkan Header dan Footer HTML ke PDF penguji, tambahkan kunci API Anda dan contoh PDF, lalu pilih Judul atau Catatan kakiSetiap blok kode merupakan pilihan tunggal untuk disalin.

Anda dapat menggunakan API Tambah Header Footer HTML yang sama untuk menambahkan logo perusahaan di bagian header, Informasi footer yang berbeda untuk setiap pelanggan., Dan kolom tambahan apa pun (nomor faktur, kode proyek, ID akun) dengan membuat HTML dari data Anda dan meneruskannya sebagai htmlContent.

API tersebut mendukung gambar tersemat dalam HTML. Gunakan sebuah <img> tag dengan URL publik atau sebuah URI data Base64 Jadi, logo akan muncul di bagian header atau footer. Jaga agar gambar tetap kecil dan berada di dalam tabel agar tata letaknya tetap ramah PDF.

Contoh: header dengan logo (kiri) dan nama perusahaan + slogan (kanan)Replace the logo URL; use Header as location in API or Power Automate.
<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>

Mengganti https://your-domain.com/logo.png dengan URL logo Anda (atau URI data Base64 jika pengaturan Anda mendukungnya). Gunakan Judul sebagai lokasi saat memanggil API atau tindakan Power Automate.

Saat Anda membuat PDF untuk banyak pelangganAnda dapat menambahkan informasi footer yang berbeda untuk setiap dengan membuat string HTML dari data pelanggan atau dokumen Anda. Di Power Automate, gunakan variabel dari "Terapkan ke setiap" (misalnya, nama pelanggan, ID akun, referensi dokumen); dalam kode, buat string dari daftar Anda atau respons API sebelum memanggil Tambah Header Footer HTML.

Contoh: footer dengan nama pelanggan dan informasi akunReplace placeholders with your flow variables (e.g. CustomerName, AccountId, DocumentRef).
<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>

Mengganti Customer Name, ACC-12345, Dan INV-2025-001 dengan variabel atau kolom alur Anda (misalnya, CustomerName, AccountId, DocumentRef). Panggil API sekali per dokumen agar setiap PDF mendapatkan footer yang benar.

Menambahkan informasi tambahan​

Anda dapat menyertakan informasi tambahan apa pun Di bagian header atau footer: nomor faktur, nomor PO, kode proyek, departemen, revisi, atau teks khusus. Gunakan pendekatan yang sama: buat satu string HTML yang menyertakan nilai-nilai tersebut (dari alur kerja, daftar, atau basis data Anda), lalu teruskan sebagai htmlContent. Jaga agar strukturnya tetap sederhana (tabel atau div dengan gaya inline) sehingga tetap ramah PDF. Gabungkan dengan logo atau dengan baris khusus pelanggan seperti pada contoh di atas.

Di mana menggunakannya: Power Automate vs API​

Anda dapat menambahkan header dan footer dengan dua cara:

  1. Power AutomateGunakan Tambahkan Header dan Footer HTML ke PDF Aksi. Masukkan PDF Anda ke dalam Isi File, HTML Anda di Konten HTML, dan pilih Judul, Catatan kaki, atau Keduanya. Mengatur Halaman (misalnya. all) dan margin sesuai kebutuhan.
  2. API: Panggilan POST /api/v2/AddHtmlHeaderFooter dengan Konten dokumen (PDF Base64), Nama dokumen, htmlContent (HTML biasa), dan lokasi (Header, Footer, atau Keduanya). Opsional: halaman, Lewati halaman pertamadan parameter margin.

Gunakan HTML yang sama di kedua tempat; cuplikan kode dalam postingan ini berfungsi di keduanya.

Kasus Penggunaan Tingkat Lanjut​

Berikut ini adalah kasus penggunaan tingkat lanjut untuk header dan footer HTML:

1. Header teknis dan laporan (Penulis, Tanggal, Revisi)

Contoh kasus: Anda membuat laporan atau dokumen teknis (misalnya dari Power Automate, SharePoint, atau alat BI) dan memerlukan header dengan Pengarang, Tanggal, Dan Revisi (atau versi) di setiap halaman untuk ketertelusuran dan kepatuhan.

Mengapa dua kolom: Kolom kiri untuk logo atau judul dokumen; kolom kanan untuk metadata agar tetap sejajar dan tidak terbungkus menjadi satu baris. Gunakan tabel sederhana dengan lebar kolom tetap dan gaya sebaris.

Tip: Buat string HTML di alur kerja Anda (misalnya, dengan Penulis/Tanggal/Revisi dinamis dari daftar atau variabel), lalu teruskan ke tindakan Tambah Header Footer HTML.

2. Otomatisasi branding laporan di Power Automate

Contoh kasus: Alur kerja ini menghasilkan atau mengambil file PDF (misalnya dari Power BI, Excel, atau templat), kemudian menambahkan header atau footer bermerek sebelum menyimpan ke SharePoint, mengirim melalui email, atau mengarsipkan.

Tip: Gunakan tabel atau div sederhana dengan CSS inline dan lebar yang ditentukan. Uji HTML Anda di Tambahkan Penguji API Header Footer HTML Pertama, lalu hubungkan ke alur kerja Anda.

3. Header versi dan revisi untuk kepatuhan

Contoh kasus: Hasil pekerjaan, kontrak, atau dokumen audit memerlukan kejelasan. nomor revisi (misalnya 4.24) dan tanggal di header agar setiap halaman dapat dilacak.

Mengapa ini penting: Auditor dan pemangku kepentingan mengharapkan untuk melihat informasi versi di setiap halaman. Header dua kolom (misalnya, nama proyek di sebelah kiri, "Revisi: X.XX | Tanggal: YYYY-MM-DD" di sebelah kanan) menjaga agar informasi tersebut tetap terlihat dan stabil dalam PDF.

Tip: Di Power Automate, buat string HTML dari variabel alur (misalnya, Revisi dari baris daftar atau nilai yang dihitung) sehingga setiap eksekusi memberi cap versi yang benar.

4. Desain di browser, terapkan melalui API

Contoh kasus: Anda mendesain header dalam file .html dan membukanya di Microsoft Edge (atau Chrome) untuk memeriksa tata letak, kemudian menerapkan desain yang sama ke PDF melalui API Power Automate.

Membawa pergi: Gunakan browser untuk mendesain, tetapi menyelesaikan Cuplikan kode dengan HTML yang ramah PDF (tabel + CSS inline). Simpan cuplikan kode tersebut sebagai "template" untuk API atau alur kerja Anda.

5. Berbagi dan menggunakan kembali templat header

Contoh kasus: Setelah Anda memiliki header yang berfungsi, Anda ingin menggunakannya kembali di berbagai alur kerja atau membagikannya dengan kolega.

Membawa pergi: Simpan HTML kerja Anda sebagai templat (misalnya, dalam file SharePoint, variabel alur, atau cuplikan dalam dokumen Anda). Ganti placeholder (Penulis, Tanggal, Revisi, nomor halaman) dengan nilai dinamis saat memanggil API atau Power Automate. Contoh dalam posting ini siap untuk disalin dan diadaptasi.

Langkah Selanjutnya​

Get Your API KeyAdd HTML Header Footer in Power AutomateTry Add HTML Header Footer APIFull API Documentation