Cara mengubah berkas HTML menjadi PDF tanpa kehilangan gayanya
Oleh tim FreePDF ·
Mengirimkan berkas .html ke orang lain itu rapuh. Di komputer yang membuatnya tampilannya benar, lalu sampai di sana tanpa lembar gayanya, atau terbuka di peramban yang menata ulang letaknya, atau malah diblokir sebagai lampiran surel. Mengubahnya menjadi PDF mengunci halamannya: satu berkas, tata letak yang sama di mana pun, dan tercetak sesuai yang terlihat.
Apa yang terbawa dan apa yang tidak
Unggah berkas .html atau .htm, lalu berkas itu dirender ke PDF sebagaimana peramban merendernya untuk dicetak. Ada tiga hal yang layak diketahui sebelum mengonversi:
- CSS di dalam berkas ikut diterapkan. Apa pun yang ada di blok
<style>atau atributstyle=akan terbawa: huruf, warna, garis tepi, tabel, latar. - JavaScript tidak dijalankan. Halaman dirender apa adanya seperti di dalam berkas. Kalau sebuah grafik atau tabel digambar oleh skrip saat halaman dimuat, yang masuk ke PDF adalah wadah kosong tempat ia bermula.
- Jalur relatif tidak menemukan apa pun. Berkas yang diunggah tidak punya alamat sebagai acuan, jadi
<img src="images/logo.png">atau<link href="style.css">tidak menunjuk ke mana-mana. URL absolut denganhttps://tetap diambil seperti biasa.
Jalan keluar untuk poin terakhir adalah halaman yang berdiri sendiri: tempel CSS ke dalam blok <style>, dan untuk gambar pakai URL lengkap atau sematkan sebagai URI data:. Sebagian besar alat yang menghasilkan laporan HTML — dan menu “Simpan halaman sebagai → berkas tunggal” di peramban — sudah bekerja begitu.
Ukuran kertas dan margin diatur dari CSS
Karena render dilakukan sebagai keluaran cetak, CSS untuk pencetakan tetap dipatuhi. Kalau HTML-nya Anda buat sendiri, beberapa aturan ini sudah jauh membantu:
@page { size: A4; margin: 20mm; }menentukan ukuran kertas dan margin. GantiA4denganLetterkalau itu kertas Anda.break-before: pagepada judul membuat setiap bagian mulai di lembar baru.break-inside: avoidpada tabel atau kartu mencegahnya terbelah ke dua halaman.- Aturan di dalam
@media printikut berlaku, jadi menu navigasi, banner, dan apa pun yang biasanya Anda sembunyikan dari mesin cetak tidak masuk ke PDF.
Kapan dialog cetak peramban justru lebih tepat
Ini perlu dikatakan terang-terangan, karena sering kali itulah jawabannya: kalau yang Anda inginkan adalah menyimpan halaman web yang hidup sebagai PDF, buka halamannya dan cetak ke PDF. Peramban sudah memuat halaman itu lengkap dengan gambarnya, skripnya sudah berjalan, dan Anda sudah masuk ke akun, jadi ia menangkap hal-hal yang memang tidak ada di dalam berkas unggahan.
Mengonversi berkas di sini lebih pas kalau Anda sudah punya .html yang berdiri sendiri di komputer — tagihan yang datang lewat surel, laporan yang ditulis sebuah skrip, hasil ekspor dari suatu alat, struk yang disimpan — dan Anda mau PDF yang bersih, tanpa kepala, kaki, dan nomor halaman yang dicap peramban di tepinya. Hasilnya juga bisa diulang: berkas yang sama menghasilkan PDF yang sama, di mesin mana pun, sesuatu yang tidak dijamin oleh dialog cetak yang setelannya berbeda di tiap komputer.
Dan kalau dokumennya justru baru akan ditulis, bukan dikonversi, Markdown melewati seluruh masalah ini: tak ada CSS yang perlu diurus dan tak ada berkas gambar yang perlu dikejar.
Pertanyaan umum
Bisakah saya memberi URL, bukan berkas?
Tidak — yang dikonversi adalah berkas yang Anda unggah. Simpan halamannya dulu (Ctrl+S / Cmd+S, pilih opsi berkas tunggal kalau peramban Anda menyediakannya), lalu unggah berkas itu. Untuk halaman yang ada di balik login, menyimpannya sendiri memang satu-satunya cara isinya bisa keluar.
PDF saya keluar tanpa gaya apa pun. Kenapa?
Hampir selalu karena lembar gayanya ada di berkas terpisah. HTML-nya merujuk style.css, yang diunggah hanya HTML-nya, jadi tidak ada yang bisa dimuat. Buka berkasnya di penyunting teks, pindahkan CSS ke blok <style> di dalam <head>, lalu konversi lagi.