Ubah HTML ke PDF

Apa yang boleh dijangkau halaman, dan apa yang dikendalikan CSS

Konversi tidak punya akses jaringan dan tidak menjalankan skrip, dan keduanya adalah keputusan keamanan, bukan fitur yang kurang. Konverter yang mengambil apa pun yang diminta halaman kiriman bisa dengan mudah diarahkan ke alamat yang hanya bisa dilihat server kami, dan konverter yang menjalankan skrip berarti menjalankan kode orang asing. Jadi stylesheet yang ditautkan ke CDN tidak ikut, gambar dengan alamat web biasa tidak dimuat, web font diganti diam-diam, dan halaman yang menggambar dirinya dengan JavaScript terkonversi sesuai isi markup sebelum apa pun dijalankan. Solusinya selalu sama: tulis CSS secara inline di blok style dan tanam gambar sebagai data URI. Browser menyediakan fitur ini langsung — “Save Page As → Web Page, Complete” di Firefox, atau “Save as MHTML” — dan halaman satu file yang tersimpan akan terkonversi dengan setia.

CSS cetak adalah yang sebenarnya mengatur hasilnya, dan itulah hal kedua yang perlu diketahui. Halaman ditata seolah-olah sedang dicetak, jadi blok @media print berlaku dan stylesheet layar biasa mungkin tidak — itulah sebabnya halaman dengan aturan cetak yang menyembunyikan navigasinya terkonversi dengan indah, sementara halaman tanpa aturan itu membawa seluruh elemen situs. @page mengatur kertas: ukuran, orientasi, dan margin dibaca darinya. break-before, break-after, dan break-inside: avoid menentukan di mana halaman terbagi, jadi tabel yang tidak boleh terpotong atau bagian yang harus dimulai di halaman baru sepenuhnya ada di tangan Anda.

Background adalah yang klasik terlewat. Browser tidak mencetak warna dan gambar background secara default, jadi header gelap bisa terkonversi menjadi putih kecuali stylesheet menyatakan -webkit-print-color-adjust: exact — satu baris saja, dan itulah beda antara dokumen bermerek dan dokumen polos. Teks tetap teks sungguhan, tautan tetap berfungsi, dan judul bisa menjadi bookmark PDF jika markup memakai elemen heading yang sesungguhnya.

Jika server kami tidak bisa dijangkau, halaman ini memberi tahu Anda lalu menyusun ulang dokumen secara lokal, mempertahankan teks, gambar, dan tata letak sederhana sambil menyederhanakan apa pun yang butuh proses tata letak sungguhan — termasuk grid, flexbox, float, dan positioning. Dokumen sederhana terkonversi hampir identik; dokumen yang didesain tidak.

Jika Anda butuh hal lain

Untuk mengonversi URL langsung — hal yang sengaja tidak bisa dilakukan halaman ini — rendering yang sama yang berjalan di server kami juga bisa berjalan di komputer Anda: chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com memuat halaman dengan akses jaringan utuh, lengkap dengan skripnya. Itulah seluruh perbedaannya, dan itulah alasan untuk memakainya.

Untuk kendali penuh atas header, footer, nomor halaman, dan margin, WeasyPrint dan Prince menerapkan spesifikasi CSS Paged Media dengan benar: header berjalan dari @top-center, penghitung halaman, catatan kaki, dan rujukan silang yang menunjuk ke nomor halaman. WeasyPrint gratis dan dipakai di sebagian besar alur dokumentasi. Chrome hampir tidak mendukung semua itu, jadi laporan otomatis dengan “Halaman 3 dari 12” di footer membutuhkan salah satunya, bukan alat ini.