HTML dengan CSS utuh dirender menjadi PDF lewat HTML Pro ke PDF. Tool ini menjalankan Chromium di sisi server, jadi CSS modern bekerja: Grid, Flexbox, web font lewat @import dan @font-face, serta gambar vektor SVG. Ukuran halamannya ditulis lewat aturan @page di CSS dokumen, dan tanpa aturan itu dokumen memakai A4 tegak dengan margin cetak standar.

Halaman tool ini sengaja tanpa panel pengaturan. Tidak ada pemilih ukuran kertas, margin, atau orientasi. Semua pengaturan cetak ditulis di CSS dokumen Anda, sehingga satu berkas sumber bisa menghasilkan dokumen dengan bentuk yang berbeda hanya dengan mengganti beberapa baris di lembar gayanya.

Prosesnya memerlukan 10 sampai 30 detik, tergantung jumlah gambar yang perlu diunduh. Waktu itu lebih panjang daripada jalur HTML sederhana, dan itu wajar: yang dijalankan bukan sekadar perender markup, melainkan peramban penuh yang memuat halaman, menjalankan skripnya, lalu mencetaknya.

Kapan jalur ini dipakai

Jalur ini dipakai saat dokumennya memang dirancang, bukan sekadar ditulis. Invoice dengan kop dan susunan kolom, laporan dengan grafik, sertifikat dengan latar dan tata huruf khusus, semuanya memerlukan CSS untuk tampil benar. Kalau kodenya hanya memakai tag teks dasar tanpa gaya, jalur yang lebih cepat adalah HTML ke PDF.

Jalur ini juga dipakai saat ukuran kertasnya harus tertentu. Aturan @page menentukan ukuran dan margin halaman, jadi dokumen resmi bisa memakai kertas yang Anda tentukan, bukan ukuran bawaan. Ini pembeda penting dari jalur lain di kelompok yang sama, karena tool tanpa panel pengaturan biasanya memakai satu ukuran kertas tetap.

Kapan sebaiknya tidak dipakai: untuk dokumen yang isinya cuma beberapa paragraf dan tidak memerlukan gaya. Menulis lembar gaya untuk itu hanya menambah pekerjaan. Jalur teks atau Markdown lebih langsung.

Langkah membuat PDF dari HTML dengan CSS

  1. Siapkan berkas HTML beserta lembar gayanya dalam satu kode, dengan CSS di dalam tag style.
  2. Tulis aturan @page di bagian atas lembar gaya: ukuran kertas dan marginnya.
  3. Periksa tautan gambar. Gambar dari URL publik HTTPS akan diunduh dan ikut dicetak.
  4. Periksa web font. Font dari @import dan @font-face dimuat sebelum halaman dicetak.
  5. Buka HTML Pro ke PDF, lalu tempelkan kodenya.
  6. Jalankan prosesnya, lalu tunggu 10 sampai 30 detik.
  7. Unduh hasilnya, lalu periksa ukuran halamannya, gambar, dan pemisahan halaman.

Langkah kedua sering dilewatkan, dan akibatnya dokumen memakai A4 tegak. Itu bukan kesalahan fatal, tetapi dokumen yang dirancang untuk ukuran lain akan terlihat berbeda dari bayangan Anda.

Mengatur ukuran kertas lewat @page

Aturan @page ditulis di dalam CSS, di luar pemilih elemen. Bentuknya menentukan ukuran dan margin halaman cetak. Ukuran yang lazim dipakai adalah A4 dan Letter, dengan orientasi tegak atau mendatar.

Karena aturan itu berada di CSS dokumen, tidak ada pengaturan yang perlu diisi di halaman tool. Kalau dokumennya perlu versi A4 dan versi Letter, cukup siapkan dua salinan kode dengan aturan @page yang berbeda, lalu render keduanya. Pendekatan ini juga membuat pengaturan cetaknya tersimpan bersama dokumennya, bukan di luar berkas.

Margin juga ditentukan di aturan yang sama. Untuk dokumen dengan kop yang melebar sampai tepi kertas, margin halaman bisa dibuat nol dan jarak tepinya diatur dari elemen di dalamnya. Cara itu lazim untuk invoice dan sertifikat.

CSS modern yang bekerja

Grid dan Flexbox bekerja penuh, jadi susunan dua kolom, kartu sejajar, dan tata letak yang bergantung pada pembagian ruang bisa dibangun seperti di halaman web. Ini alasan utama jalur ini dipakai untuk dokumen yang susunannya tidak lagi sederhana.

Web font bekerja lewat @import dan @font-face. Huruf yang dipakai dokumen diunduh sebelum halaman dicetak, sehingga tampilannya tidak bergantung pada font yang terpasang di komputer pembaca. Untuk dokumen yang identitasnya bergantung pada tata huruf, ini pembeda yang penting.

Gambar vektor SVG juga dirender. Grafik, ikon, dan diagram yang disimpan sebagai SVG tetap tajam di dokumen, karena bentuknya disimpan sebagai vektor, bukan piksel. Untuk diagram yang perlu diperbesar, SVG lebih baik daripada gambar biasa.

JavaScript dijalankan sebelum halaman dicetak. Kalau ada bagian halaman yang isinya dibangun oleh skrip, misalnya nomor invoice yang dihitung atau tanggal yang diformat, hasilnya ikut tercetak. Sifat ini berbeda dari jalur HTML sederhana, yang membuang isi script.

Gambar dan waktu proses

Gambar dari URL publik HTTPS diunduh dan ikut dicetak. Gambar lokal di komputer Anda tidak bisa diambil, karena yang dirender adalah kode yang ditempelkan, bukan berkas di perangkat Anda. Untuk gambar yang harus ikut, unggah dulu ke alamat publik, lalu tulis alamat HTTPS-nya di kode.

Jumlah gambar menentukan waktu proses. Dokumen tanpa gambar selesai mendekati 10 detik, sedangkan dokumen dengan banyak gambar bisa mendekati 30 detik. Gambar beresolusi besar memperlambat prosesnya, jadi kecilkan dulu gambarnya kalau ukurannya jauh lebih besar daripada kebutuhan cetak.

Kalau gambarnya tidak muncul, periksa dua hal: alamatnya harus HTTPS dan bisa dibuka tanpa login. Gambar di balik layar login tidak bisa diunduh oleh server. Sifat ini sama dengan batas yang berlaku pada jalur lain di kelompok ini.

Tanpa panel pengaturan

Tidak ada panel pengaturan di halaman tool. Ini keputusan yang disengaja: semua yang menentukan hasil cetak sudah ditulis di CSS dokumen, sehingga tidak ada dua sumber kebenaran yang bisa saling bertentangan. Anda tidak perlu menebak apakah ukuran kertas diambil dari panel atau dari CSS.

Konsekuensinya, Anda perlu menulis aturan @page sendiri kalau ukuran bawaannya tidak sesuai. Tanpa aturan itu, dokumen memakai A4 tegak dengan margin cetak standar. Untuk dokumen yang ukurannya tidak dipersoalkan, aturan itu tidak wajib.

Cara memeriksa hasilnya: buka berkas PDF-nya, lalu lihat ukuran halamannya di properti dokumen atau dengan membandingkannya terhadap kertas A4. Kalau ukurannya bukan yang Anda maksud, periksa aturan @page di kode sumbernya.

Masalah yang sering terjadi

Dokumen memakai A4 padahal seharusnya ukuran lain. Penyebabnya aturan @page tidak ada atau salah tulis. Periksa apakah aturannya berada di dalam lembar gaya dokumen, bukan di berkas terpisah yang tidak ikut ditempel.

Gambar tidak muncul. Periksa alamatnya. Gambar harus berada di URL publik HTTPS dan bisa dibuka tanpa login. Gambar lokal tidak bisa diambil.

Web font tidak terpasang dan hurufnya berganti. Penyebabnya alamat font tidak bisa diunduh. Periksa apakah alamat @import atau @font-face masih bisa diakses, lalu render ulang.

Prosesnya terasa lambat. Waktu proses ditentukan jumlah gambar yang perlu diunduh. Kecilkan gambar beresolusi besar, atau kurangi jumlah gambar di dokumen.

Tata letaknya berbeda dari yang terlihat di peramban. Perbedaan kecil bisa muncul karena lebar halaman cetak berbeda dari lebar jendela peramban. Periksa bagian yang memakai satuan lebar relatif, lalu sesuaikan untuk ukuran halaman yang ditulis di @page.

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 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

Di mana ukuran kertasnya diatur? Di CSS dokumen, lewat aturan @page. Tidak ada panel pengaturan di halaman tool. Tanpa aturan itu, dokumen memakai A4 tegak dengan margin cetak standar.

Apakah gambar dari URL publik ikut tercetak? Ya. Gambar dari URL publik HTTPS diunduh dan dirender dengan kualitas warna aslinya. Gambar yang berada di balik layar login tidak bisa diunduh.

Apakah JavaScript di dalam kode dijalankan? Ya. Skrip dijalankan sebelum halaman dicetak, jadi isi yang dibangun skrip ikut terlihat di dokumen.

Apakah hasilnya bisa disunting setelah jadi? Bisa dibuka di aplikasi penyunting PDF, tetapi perbaikan lebih cepat dilakukan di kode sumbernya. Kalau ada perubahan, sunting kodenya lalu render ulang.

Apakah kode yang memakai Flexbox dan Grid aman dirender? Aman. Keduanya didukung penuh. Kalau kode Anda tidak memakai CSS sama sekali, jalur HTML sederhana lebih cepat.

Setelah dokumen jadi

Periksa ukuran halamannya, 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.

Untuk dokumen dari templat yang sudah disiapkan, lanjutkan ke Cara Membuat PDF dari Template HTML. Peta lengkap kelompok ini ada di Membuat PDF dari Gambar, Teks, dan Halaman Web.