Membuat PDF dari HTML sederhana dilakukan dengan membuka HTML ke PDF, menempelkan kodenya, lalu mengunduh hasilnya. Tool ini bekerja pada markup tanpa CSS: tag teks dasar ditangani, tabel diubah menjadi tabel sungguhan, dan tampilan akhirnya mengikuti gaya dokumen bawaan. Tidak ada aplikasi yang perlu dipasang.
Kata "sederhana" di sini penting. Tool ini memang dirancang untuk markup yang isinya lebih penting daripada gayanya: catatan, bukti transaksi, tanda terima, atau dokumen internal yang disusun dari tag dasar. Selama kodenya hanya memakai tag teks dan tabel, hasilnya bisa diprediksi.
Kalau kodenya memakai CSS untuk mengatur warna, ukuran, atau susunan, jalurnya bukan tool ini melainkan HTML Pro ke PDF. Perbedaan dua jalur itu dibahas di bagian tersendiri, karena salah pilih berarti kode yang sudah disiapkan harus diproses ulang.
Kapan markup sederhana sudah cukup
Markup sederhana cukup saat yang Anda butuhkan adalah dokumen yang terbaca, bukan dokumen yang tampilannya dirancang. Struktur seperti judul, paragraf, daftar, kutipan, dan tabel bisa dibangun hanya dengan tag dasar. Gaya bawaannya sudah rapi: heading lebih besar daripada teks isi, daftar punya penanda, dan tabel punya garis.
Jalur ini juga berguna untuk dokumen yang dihasilkan mesin. Kalau ada skrip yang mengeluarkan laporan dalam bentuk HTML tanpa gaya, hasilnya bisa langsung dirender menjadi PDF tanpa menyiapkan lembar gaya apa pun. Yang penting kode yang dihasilkan memakai tag yang dikenal.
Sebaliknya, jangan pakai jalur ini untuk halaman yang tampilannya bergantung pada CSS. Halaman web modern hampir selalu masuk kategori itu: susunannya dari Flexbox atau Grid, warnanya dari kelas CSS, dan hurufnya dari web font. Untuk bahan seperti itu, jalur yang benar adalah HTML Pro.
Langkah membuat PDF dari HTML
- Siapkan kodenya di editor teks atau di aplikasi yang menghasilkannya.
- Pastikan tag pembuka dan penutupnya berpasangan, terutama untuk daftar, tabel, dan kutipan.
- Buka HTML ke PDF di peramban.
- Tempelkan kodenya ke editor yang tersedia.
- Jalankan prosesnya, lalu tunggu sampai selesai.
- Unduh berkas PDF hasilnya.
- Periksa jumlah halaman, isi tabel, dan urutan bagiannya.
Langkah kedua paling sering terlewat, dan akibatnya paling terlihat. Tag yang tidak ditutup membuat sisa dokumen dianggap bagian dari elemen itu, sehingga formatnya berubah sampai akhir. Kalau hasilnya terlihat aneh di tengah dokumen, periksa pasangan tag-nya.
Tag yang ditangani
Tag teks dasar didukung: h1 sampai h6 untuk judul bertingkat, p untuk paragraf, ul dan ol untuk daftar, li untuk butir daftar, strong dan b untuk teks tebal, em dan i untuk teks miring, code dan pre untuk kode, serta blockquote untuk kutipan blok. Tag a untuk tautan juga dikenali.
Tag img ditangani lewat teks alternatifnya. Isi atribut alt yang tercetak, jadi tulis keterangan gambar yang benar-benar menjelaskan isinya. Kalau gambarnya harus ikut tercetak, itu jalur HTML Pro yang mengunduh gambar dari URL publik HTTPS.
Tag yang tidak dikenal tidak menggagalkan proses. Isinya biasanya tetap terbaca sebagai teks, tetapi tanpa penataan khusus. Kalau ada tag yang ingin Anda pakai tetapi tidak ada di daftar di atas, jangan berharap tool ini menanganinya; sederhanakan markupnya atau pindah ke jalur yang lebih lengkap.
Tabel menjadi tabel sungguhan
Perbedaan terbesar tool ini dari jalur teks biasa adalah perlakuan tabelnya. Tabel HTML diubah menjadi tabel sungguhan di dalam dokumen, bukan deretan teks yang dipisahkan spasi. Baris dan selnya tetap sejajar, dan judul kolomnya tetap berada di posisinya.
Struktur tabelnya dibangun dari table, tr, td, dan th. Pastikan jumlah sel di setiap baris sesuai dengan jumlah kolom yang Anda maksud. Sel yang kurang membuat barisnya pendek, dan sel yang lebih akan membuat tabelnya melebar.
Tabel yang sangat lebar bisa melewati tepi halaman, karena kertas tidak bisa digulir mendatar. Untuk tabel dengan banyak kolom, pertimbangkan memecahnya menjadi beberapa tabel atau memindahkan sebagian kolom ke lampiran. Perbaikan di kode sumber selalu lebih cepat daripada memperbaiki hasil rendernya.
Isi yang dibuang
Isi tag script, style, dan head dibuang. Ini keputusan yang masuk akal untuk dokumen cetak: skrip tidak ada gunanya di atas kertas, dan gaya yang ditulis di dalam halaman memang tidak dipakai oleh tool ini.
Konsekuensinya perlu dipahami. Kalau ada teks yang sebenarnya dihasilkan oleh skrip, teks itu tidak akan muncul di dokumen, karena yang dirender adalah kode yang Anda tempelkan, bukan hasil jalan skripnya. Untuk halaman yang isinya bergantung pada JavaScript, jalur yang tepat adalah HTML Pro, yang menjalankan JavaScript sebelum halaman dicetak.
Judul di dalam head juga tidak ikut tercetak. Kalau dokumennya memerlukan judul di bagian atas halaman, tulis judul itu sebagai elemen h1 di dalam body.
HTML sederhana atau HTML Pro
Pilihannya ditentukan oleh satu pertanyaan: apakah kodenya memakai CSS? Kalau tidak, jalur HTML sederhana lebih cepat dan hasilnya bisa diprediksi. Kalau ya, pindah ke HTML Pro ke PDF, yang merender kode dengan Chromium sehingga Grid, Flexbox, web font lewat @import dan @font-face, serta gambar vektor SVG bekerja.
Ukuran kertas juga berbeda antara dua jalur itu. Jalur HTML sederhana memakai lembar bawaan tanpa pilihan ukuran kertas atau margin. Jalur HTML Pro mengikuti aturan @page di CSS dokumen, dan tanpa aturan itu dokumen memakai A4 tegak dengan margin cetak standar.
Waktu prosesnya juga berbeda. Jalur sederhana selesai lebih cepat karena yang dirender hanya markup. Jalur HTML Pro memerlukan 10 sampai 30 detik, tergantung jumlah gambar yang perlu diunduh.
Masalah yang sering terjadi
Gaya dari CSS tidak muncul. Penyebabnya CSS tidak dipakai di jalur ini. Pindah ke HTML Pro ke PDF kalau tampilannya memang harus mengikuti lembar gaya.
Sebagian dokumen berubah format setelah satu titik. Penyebabnya tag yang tidak ditutup, biasanya pada daftar atau tabel. Periksa pasangan tag di kode sumbernya, lalu render ulang.
Tabel melewati tepi halaman. Penyebabnya jumlah kolom yang banyak atau sel yang isinya panjang. Pecah tabelnya, atau pindahkan sebagian isinya ke daftar.
Teks yang seharusnya muncul tidak ada. Periksa apakah teks itu berada di dalam tag script. Isi script dibuang, jadi teks yang dihasilkan skrip tidak ikut dirender.
Gambar tidak ikut tercetak. Tag img ditangani lewat teks alternatifnya. Isi atribut alt-nya dengan keterangan yang jelas, atau pindah ke jalur HTML Pro kalau gambarnya harus ikut.
Kapan sebaiknya tidak memakai tool daring
Dokumen berisi data pribadi lengkap, laporan keuangan, atau bahan internal yang belum boleh keluar dari jaringan kantor sebaiknya dirender dengan aplikasi yang berjalan di komputer sendiri. 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
Apakah berkas .html bisa langsung diunggah? Tool ini bekerja dari kode yang ditempelkan ke editor, jadi isi berkasnya perlu disalin lebih dulu. Setelah kodenya ada di editor, prosesnya berjalan sama seperti kode yang diketik langsung.
Apakah tabel di dalam kode menjadi tabel sungguhan? Ya. Tabel HTML diubah menjadi tabel sungguhan di dokumen, bukan deretan teks. Baris dan selnya tetap sejajar.
Apakah teks di dalam dokumen bisa dicari? Bisa. Dokumen dari HTML berisi teks vektor yang tajam dan bisa dicari di pembaca PDF. Sifat ini berbeda dari dokumen yang dibuat dari gambar atau hasil pindai.
Berapa halaman yang dihasilkan? Jumlahnya mengikuti panjang isinya. Isi yang melewati satu halaman dilanjutkan ke halaman berikutnya dengan gaya yang sama.
Apakah teks di dalam tag script ikut tercetak? Tidak. Isi script dibuang, begitu juga isi style dan head. Yang dirender hanya isi body.
Setelah dokumen jadi
Periksa jumlah halaman, isi tabel, dan urutan bagiannya. Kalau dokumennya perlu disatukan dengan berkas lain, gunakan Gabung PDF. Kalau ukurannya melewati batas penerima, kecilkan lewat Kompres PDF. Halaman yang perlu dirapikan orientasinya bisa diputar lewat Putar PDF.
Untuk dokumen yang isinya perlu ditata dengan CSS, lanjutkan ke Cara Membuat PDF dari HTML dengan CSS Utuh. Peta lengkap kelompok ini ada di Membuat PDF dari Gambar, Teks, dan Halaman Web.