Cara mengonversi HTML ke PDF
Membuat PDF dari HTML berguna untuk menghasilkan faktur, laporan, surat, sertifikat — dokumen apa pun di mana Anda ingin mengontrol tata letak dengan CSS tetapi mendistribusikannya sebagai PDF.
Cara mengonversi HTML ke PDF
- Tempel HTML Anda — masukkan kode HTML Anda, termasuk CSS inline atau tag
<style>, ke dalam editor. Kode dapat menyertakan struktur halaman lengkap dengan header, tabel, gambar, dan style. - Pratinjau hasilnya — pratinjau langsung menunjukkan dengan tepat bagaimana PDF Anda akan dirender saat Anda mengetik. Sesuaikan HTML dan CSS hingga rendering sesuai dengan harapan Anda.
- Hasilkan dan unduh — klik tombol hasilkan untuk membuat PDF di peramban Anda, lalu unduh secara instan.
Apa yang dapat Anda buat
- Faktur dan tanda terima — tabel terstruktur dengan identitas perusahaan, baris item, dan total
- Laporan — dokumen terformat dengan judul, paragraf, grafik, dan tabel data
- Sertifikat — tata letak bergaya dengan font kustom, batas, dan teks tengah
- Surat — korespondensi profesional dengan kop, isi, dan area tanda tangan
- CV — tata letak yang rapi diekspor sebagai PDF bersih untuk lamaran Anda
Tips gaya untuk keluaran PDF
Gunakan style inline atau tag <style> — stylesheet eksternal tidak dimuat. Tempatkan semua CSS Anda baik secara inline pada elemen, atau dalam blok <style> di HTML.
Tetapkan margin halaman — gunakan @page { margin: 20mm; } di CSS untuk mengontrol ruang di sekitar konten Anda dalam PDF.
Gunakan unit yang sesuai untuk pencetakan — mm, cm, dan pt lebih dapat diprediksi dalam PDF daripada px atau rem. Gunakan mm untuk margin dan jarak yang harus sesuai dengan dimensi fisik.
Hindari tata letak yang bergantung pada viewport — lebar dalam persentase dan lebar piksel tetap bekerja paling baik. Unit yang terkait dengan viewport (vw, vh) mungkin tidak berperilaku seperti yang diharapkan dalam PDF.
Tips
- Pratinjau dahulu — selalu periksa pratinjau langsung sebelum menghasilkan. Jauh lebih cepat untuk mengiterasi pada HTML daripada membuat ulang PDF setiap kali.
- Gunakan base64 untuk gambar — konversi gambar ke Data URI base64 untuk menjamin penyertaannya dalam PDF. URL eksternal dapat gagal karena batasan CORS.
- Tetap sederhana — tata letak CSS yang kompleks (grid bersarang, elemen berposisi yang tumpang tindih) mungkin tidak dirender dengan sempurna. Tata letak yang lebih sederhana memberikan PDF yang lebih dapat diandalkan.
- Uji pemutus halaman — untuk dokumen multi-halaman, gunakan
page-break-before: alwaysuntuk mengontrol di mana halaman baru dimulai.
Pertanyaan yang sering diajukan
Apakah PDF mempertahankan gaya CSS saya?
Ya. Konverter merender HTML Anda dengan CSS yang diterapkan, termasuk warna, font, margin, dan tata letak. PDF terlihat seperti halaman web yang dirender, bukan kode sumber mentah.
Bisakah saya menyertakan gambar dalam PDF?
Ya. Gunakan gambar base64 (Data URI) untuk hasil yang paling andal. URL gambar eksternal dapat berfungsi jika dapat diakses dan kompatibel CORS.
Apakah HTML saya dikirim ke server?
Tidak. Konversi terjadi sepenuhnya di peramban Anda. Kode dan PDF yang dihasilkan tidak pernah meninggalkan perangkat Anda.
Fitur CSS apa yang didukung?
CSS standar, termasuk tata letak, warna, font, latar belakang, batas, dan tabel, didukung dengan baik. Fitur lanjutan seperti CSS Grid, animasi kompleks, dan beberapa kasus tepi Flexbox mungkin terbatas.