Template HTML diubah menjadi PDF dengan mengganti bagian isiannya, lalu merender kode hasilnya lewat HTML Pro ke PDF. Tool itu menjalankan Chromium, jadi lembar gaya templatnya bekerja utuh, termasuk Grid, Flexbox, web font, dan gambar vektor SVG. Ukuran kertasnya dibaca dari aturan @page di CSS templat.
Pola kerjanya berbeda dari menulis dokumen dari nol. Di sini yang Anda siapkan bukan isinya, melainkan templatnya: satu berkas HTML dengan CSS yang menentukan tampilan, dan bagian tertentu yang diganti untuk setiap dokumen. Setiap dokumen baru cukup mengganti isiannya, lalu dirender ulang.
Untuk templat seperti ini, jalur HTML sederhana tidak cukup karena hampir semua templat memakai CSS. HTML ke PDF tidak memakai CSS sama sekali, jadi tampilan templatnya akan hilang. Perbedaan kedua jalur itu dibahas lebih lengkap di Cara Membuat PDF dari HTML Sederhana.
Kapan templat dipakai
Templat dipakai saat jenis dokumennya berulang tetapi isinya berbeda. Invoice bulanan, tanda terima, surat keterangan, dan sertifikat adalah contoh yang paling sering. Menyusun templatnya sekali berarti setiap dokumen berikutnya hanya perlu mengganti data.
Templat juga dipakai saat tampilannya harus seragam antar dokumen. Kalau sepuluh tanda terima harus terlihat sama persis, satu templat lebih aman daripada menyalin dokumen lama lalu menyunting isinya. Salinan bisa membawa sisa data yang tidak sengaja terhapus, sedangkan templat dimulai dari keadaan yang sama setiap kali.
Sebaliknya, templat tidak cocok untuk dokumen yang susunannya berubah banyak setiap kali. Untuk naskah atau catatan, jalur Markdown atau teks lebih langsung, karena tidak ada tata letak yang perlu dijaga.
Langkah membuat PDF dari templat
- Siapkan templatnya sebagai satu berkas HTML dengan CSS di dalam tag style.
- Tandai bagian yang akan diganti dengan penanda yang mudah dicari, misalnya kurung kurawal ganda.
- Tulis aturan
@pageuntuk ukuran kertas dan marginnya. - Periksa aset luar: web font dan gambar harus berada di alamat publik HTTPS.
- Ganti setiap penanda dengan data dokumen yang sedang dibuat.
- Buka HTML Pro ke PDF, lalu tempelkan kode hasil penggantian.
- Render, tunggu 10 sampai 30 detik, lalu unduh dan periksa hasilnya.
Langkah kedua menentukan seberapa mudah templatnya dipakai ulang. Penanda yang khas, misalnya {{nama}} dan {{nomor}}, jauh lebih aman daripada penanda yang bisa muncul di teks biasa. Kalau ada skrip yang mengisi templatnya, penanda yang khas membuat penggantiannya tidak salah sasaran.
Mengganti isian dengan aman
Isi template adalah tempat kesalahan paling sering terjadi, dan kesalahannya biasanya berupa data yang tertinggal dari dokumen sebelumnya. Setelah mengganti isiannya, periksa daftar penanda templat satu per satu, lalu pastikan tidak ada yang tersisa di kode.
Periksa juga data yang panjang. Nama perusahaan yang panjang, daftar barang yang banyak, atau catatan tambahan bisa membuat bagian tertentu melebar dan mendorong susunan lainnya. Perbedaan itu wajar; yang perlu dipastikan adalah susunannya tetap terbaca dan tidak melewati tepi halaman.
Untuk dokumen yang datanya berasal dari daftar, periksa jumlah barisnya. Tabel dengan baris yang banyak bisa melewati satu halaman, dan pemisahan halamannya perlu diperiksa secara khusus. Aturan cetak di CSS bisa dipakai untuk mencegah baris terpotong di tengah, tetapi hasilnya tetap perlu dilihat.
Mengatur kertas dan margin
Ukuran kertas ditulis di aturan @page di dalam CSS templat. Karena aturan itu berada di templat, ukuran kertasnya ikut tersimpan bersama tampilannya. Templat invoice bisa ditulis untuk A4, sedangkan templat label bisa ditulis untuk ukuran lain, tanpa perlu mengubah pengaturan di halaman tool.
Margin halaman juga diatur di aturan yang sama. Untuk dokumen dengan kop yang melebar sampai tepi kertas, margin halaman dibuat nol dan jarak tepinya diatur dari elemen di dalam dokumen. Susunan seperti itu lazim untuk invoice dan sertifikat.
Tanpa aturan @page, dokumen memakai A4 tegak dengan margin cetak standar. Itu bukan kesalahan, tetapi templat yang dirancang untuk ukuran lain akan tampil berbeda dari yang Anda rencanakan. Tulis aturannya sejak templatnya dibuat, bukan setelah hasilnya salah.
Aset luar di dalam templat
Web font bekerja lewat @import dan @font-face. Kalau templatnya memakai huruf khusus, alamatnya harus bisa diunduh saat render. Font yang disimpan sebagai berkas lokal di komputer Anda tidak bisa diambil, karena yang dirender adalah kode yang ditempelkan.
Gambar juga harus berada di URL publik HTTPS. Gambar yang ikut di dalam kode sebagai data perlu diperiksa apakah ukurannya wajar, karena data yang besar memperlambat render dan memperbesar kode yang ditempel. Untuk logo dan ikon, gambar vektor SVG lebih baik daripada gambar biasa karena tetap tajam di semua ukuran.
JavaScript dijalankan sebelum halaman dicetak. Kalau templatnya memakai skrip untuk menghitung total atau memformat tanggal, hasilnya ikut tercetak. Sifat ini berguna untuk dokumen yang isinya perlu dihitung, misalnya invoice dengan jumlah baris yang berubah.
Memeriksa hasil templat
Empat hal yang perlu diperiksa setiap kali templat dirender. Pertama, semua isian sudah terganti dan tidak ada penanda yang tersisa. Kedua, ukuran halamannya sesuai aturan @page yang tertulis.
Ketiga, gambar dan logonya ikut tercetak. Kalau ada yang hilang, periksa alamatnya: harus HTTPS dan bisa dibuka tanpa login. Keempat, pemisahan halamannya masuk akal, terutama untuk dokumen yang isinya lebih dari satu halaman.
Pemeriksaan ini cepat, dan hasilnya menentukan apakah dokumennya layak dikirim. Untuk dokumen yang dipakai berulang, periksa juga templatnya setiap kali ada perubahan pada lembar gayanya, karena perubahan kecil di CSS bisa menggeser susunan di semua dokumen berikutnya.
Masalah yang sering terjadi
Tampilan templatnya hilang sama sekali. Penyebabnya kode dirender lewat jalur HTML sederhana, yang tidak memakai CSS. Pastikan rendernya lewat HTML Pro ke PDF.
Ada teks aneh yang tersisa di dokumen. Penyebabnya penanda isian tidak terganti. Periksa daftar penanda templat, lalu pastikan setiap penanda ada datanya.
Ukuran kertasnya bukan yang direncanakan. Periksa aturan @page di CSS templat. Tanpa aturan itu, dokumen memakai A4 tegak dengan margin cetak standar.
Logo tidak muncul. Periksa alamat gambarnya. Gambar harus berada di URL publik HTTPS. Gambar lokal dan gambar di balik layar login tidak bisa diunduh.
Susunannya bergeser setelah isiannya diganti. Penyebabnya data yang lebih panjang daripada perkiraan. Periksa bagian yang melebar, lalu sesuaikan lebar atau ukuran hurufnya di templat.
Kapan sebaiknya tidak memakai tool daring
Dokumen berisi data pribadi lengkap atau data keuangan yang belum boleh keluar dari jaringan kantor sebaiknya dirender dengan peramban di komputer sendiri, memakai fitur cetak ke PDF. Untuk tool di katalog ini, berkas dialirkan ke pemroses dan hasilnya dikirim balik ke peramban tanpa ditulis ke penyimpanan permanen, tetapi berkas tetap meninggalkan perangkat selama proses berlangsung. Keterangan lengkapnya ada di kebijakan privasi.
Batas paketnya: tanpa akun 20 pemrosesan per hari dengan 10 MB per berkas, paket Gratis 30 pemrosesan per hari, dan paket Berbayar tanpa batas jumlah pemrosesan dengan 200 MB per berkas. Rinciannya ada di halaman harga.
Pertanyaan yang sering muncul
Berapa lama proses rendernya? Perkiraan waktunya 10 sampai 30 detik, tergantung jumlah gambar yang perlu diunduh. Dokumen tanpa gambar selesai lebih cepat.
Apakah templatnya harus ditulis dari nol? Tidak. Templat apa pun yang memakai HTML dan CSS bisa dipakai, selama CSS-nya berada di dalam kode yang dirender dan aset luarnya berada di alamat publik.
Apakah isi templat bisa berasal dari basis data? Bisa, tetapi penggantian isiannya dilakukan di luar tool ini. Setelah kode hasil penggantian siap, tempelkan ke halaman tool lalu render.
Apakah templat yang sama bisa menghasilkan dua ukuran kertas? Bisa. Ukuran kertas ditulis di aturan @page, jadi cukup siapkan dua salinan kode dengan aturan yang berbeda lalu render keduanya.
Apakah templatnya bisa menyimpan nomor dokumen berurutan? Nomor dokumen diisi sebagai bagian dari data, bukan oleh tool ini. Siapkan penomoran di sumber datanya, lalu ganti penanda templatnya untuk setiap dokumen.
Setelah dokumen jadi
Periksa isian, ukuran halaman, gambar, dan pemisahan halamannya. Kalau ukurannya perlu dikecilkan, gunakan Kompres PDF. Kalau dokumennya perlu disatukan dengan berkas lain, gunakan Gabung PDF. Pekerjaan merapikan halaman dibahas di Mengatur Halaman PDF.
Buka HTML Pro ke PDF, tempelkan kode templatnya, lalu render. Untuk templat yang memakai CSS utuh dan aturan cetak sendiri, lanjutkan ke Cara Membuat PDF dari HTML dengan CSS Utuh. Peta lengkap kelompok ini ada di Membuat PDF dari Gambar, Teks, dan Halaman Web.