Konverter HTML ke PDF Gratis

Konversi kode HTML ke PDF dengan kustomisasi penuh. Tambahkan logo, stilisasi dokumen Anda, dan hasilkan PDF profesional, semua di browser Anda.

Pratinjau akan muncul di sini…

Opsi PDF

Tentang konversi HTML → PDF

PDF dimulai sebagai proyek "Camelot" John Warnock di Adobe pada 1991, sebuah proposal internal untuk membuat "format file umum yang dapat menangkap dokumen dari aplikasi apa pun, mengirimkan versi elektronik dari dokumen-dokumen ini ke mana saja, dan melihatnya serta mencetaknya di mesin apa pun". Warnock adalah co-founder Adobe dan penemu (bersama Charles Geschke) PostScript; tujuan Camelot adalah mengambil jaminan kesetiaan cetak PostScript dan membuatnya bekerja di layar serta kertas. Acrobat 1.0 dan PDF 1.0 diluncurkan pada Juni 1993, dengan reader Acrobat komersial pertama seharga 50 dolar. PDF adalah format proprietary yang dikontrol Adobe selama lima belas tahun; Adobe merilis spesifikasi ke ISO pada 2008 sebagai ISO 32000-1:2008 (PDF 1.7 diterbitkan sebagai standar terbuka); PDF 2.0 (ISO 32000-2) utama tiba pada 2017 dengan revisi hingga 2020. Adobe melepaskan hak paten yang tersisa pada April 2023, membuat PDF sepenuhnya bebas paten di seluruh dunia. PDF sekarang adalah format dokumen portabel universal, setiap sistem operasi membacanya secara native, setiap printer memahaminya, setiap sistem hukum menerimanya. Seluruh bangunan bertumpu pada layout posisi tetap gaya PostScript: setiap elemen di halaman PDF memiliki posisi absolut (x, y), disejajarkan baseline ke sistem koordinat halaman, dengan teks dikodekan sebagai referensi font + glyph dan grafik sebagai perintah path.

Ketidakcocokan dasar antara HTML dan PDF adalah yang membuat konversi HTML-ke-PDF lebih sulit daripada kelihatannya. HTML berbasis reflow, konten beradaptasi dengan viewport, paragraf membungkus ulang saat resize, layout berubah saat pengguna zoom. PDF adalah layout tetap, setiap elemen diposisikan absolut, batas halaman eksplisit, tidak pernah ada reflow. Mengonversi dari satu ke yang lain memaksa serangkaian keputusan sulit: bagaimana memecah halaman panjang, di mana font yang disematkan hidup di PDF yang dihasilkan, bagaimana grafik vektor dipertahankan, apakah link tetap dapat diklik. Tidak ada jawaban yang secara objektif benar untuk sebagian besar dari ini, perilaku yang tepat tergantung pada use case.

Dua Pendekatan JavaScript: Raster vs Vektor

Konversi HTML-ke-PDF berbasis browser memiliki dua arsitektur. html2pdf.js (Erik Koopmans, digunakan oleh alat ini) membungkus dua pustaka yang mendasari, html2canvas (yang merender elemen HTML ke gambar canvas dengan membaca layout dari DOM dan menggambarnya kembali) dan jsPDF (yang membangun PDF dari primitif). Pipeline: HTML, gambar canvas, sematkan gambar di PDF. Hasilnya akurat-piksel, apa yang Anda lihat dalam preview adalah apa yang Anda dapatkan di PDF, tetapi hanya raster: teks di PDF adalah gambar, bukan teks yang dapat dipilih. Anda tidak bisa mencari kata di dalam PDF, tidak bisa copy-paste darinya, screen reader tidak bisa membacanya. Untuk laporan, sertifikat, faktur, dan dokumen sekali pakai ini dapat diterima; untuk dokumen di mana teks perlu dapat dicari atau diakses, ini adalah batasan signifikan. Arsitektur alternatif menggunakan jsPDF langsung dengan primitif text-rendering (doc.text(), doc.line(), doc.image()), membangun PDF dari nol dengan teks yang dapat dipilih dan grafik vektor. Ini memerlukan menulis kode konverter untuk setiap elemen HTML yang ingin Anda dukung, tetapi menghasilkan PDF "asli" yang dapat dicari dan diakses. Trade-offnya: html2pdf.js adalah satu baris kode; pendekatan jsPDF-langsung adalah proyek rekayasa substansial. Alat ini memprioritaskan kemudahan penggunaan (html2pdf.js) daripada kemampuan pemilihan teks, sadari trade-off saat memutuskan apakah output memenuhi kebutuhan Anda.

Alternatif Server-Side, Saat Browser-Side Tidak Cukup

wkhtmltopdf adalah alat command-line HTML-ke-PDF open-source yang sudah lama ada, renderer berbasis WebKit yang mengonversi HTML ke PDF di server. Digunakan dalam banyak pipeline CI, aplikasi perusahaan, dan layanan generasi PDF. Proyek wkhtmltopdf diarsipkan pada 2023 (repositori GitHub sekarang read-only); seharusnya bukan rekomendasi untuk aplikasi baru, meskipun miliaran PDF yang ada dihasilkan dengannya. Puppeteer (Google, headless Chrome sejak 2017) adalah standar industri modern untuk HTML-ke-PDF server-side. page.pdf() Puppeteer menggunakan pipeline generasi PDF penuh Chromium, teks yang dapat dipilih, font yang disematkan, grafik vektor, hyperlink semua bekerja dengan benar karena Chromium memiliki backend PDF sungguhan. Playwright (Microsoft, 2020) adalah setara cross-browser (Chromium, Firefox, WebKit) dengan kemampuan generasi PDF yang sama. Prince (komersial, 495 dolar/server) adalah implementasi CSS Paged Media terbaik di kelasnya, mendukung layout multi-kolom, header/footer berjalan, halaman bernama, catatan kaki, fitur OpenType. WeasyPrint (open source, Python) adalah alternatif cross-platform dengan fitur serupa. Paged.js adalah polyfill yang membawa fitur CSS Paged Media ke generasi PDF berbasis browser. "Simpan sebagai PDF" built-in browser (File, Cetak, Simpan sebagai PDF) adalah opsi termurah dari semua, gratis, sudah terinstal, mendukung CSS Paged Media dengan cukup baik, dan menghasilkan output PDF teks yang dapat dipilih. Untuk konversi sekali pakai, ini sering kali jawaban yang tepat daripada alat pihak ketiga.

CSS Paged Media, Bagaimana Real Print-from-CSS Bekerja

Modul CSS Paged Media W3C mendefinisikan serangkaian fitur CSS khusus untuk output paginated: aturan @page untuk mengontrol ukuran halaman, margin dan orientasi; @page :left / @page :right untuk margin asimetris pada halaman kiri dan kanan buku; @page :first untuk penanganan khusus halaman pertama; margin boxes (@top-center, @bottom-right, dll.) untuk header dan footer berjalan; page-break-before / page-break-after / page-break-inside untuk mengontrol di mana halaman dipecah (dengan sintaks modern break-before: page / break-after: page / break-inside: avoid); orphans dan widows untuk kontrol pemutusan paragraf. Browser mengimplementasikan subset CSS Paged Media yang bervariasi dalam pipeline cetak mereka. Prince dan WeasyPrint mengimplementasikan spesifikasi penuh; page.pdf() Chrome mencakup sebagian besar; html2pdf.js (alat ini) mendukung aturan dasar page-break-* tetapi melewatkan fitur margin-box dan named-page yang lebih rumit. Untuk dokumen yang membutuhkan layout berkualitas buku (halaman judul, awal bab, header berjalan, catatan kaki), gunakan Prince atau WeasyPrint; untuk kasus tipikal "simpan laporan ini sebagai PDF", html2pdf.js sudah cukup.

Kasus penggunaan umum:

Lingkup Jujur: Apa yang Alat Ini Lakukan dan Tidak

Alat ini menggunakan html2pdf.js v0.10.1 (build bundled dengan html2canvas + jsPDF) untuk merender HTML di browser Anda dan menghasilkan unduhan PDF. PDF yang dihasilkan akurat-piksel terhadap preview, apa yang Anda lihat adalah apa yang Anda dapatkan, tetapi teks dirender sebagai gambar raster, bukan teks yang dapat dipilih. Mendukung ukuran halaman A4, Letter, A3, dan A5, orientasi portrait dan landscape, margin yang dapat dikonfigurasi, nama file kustom, dan aturan CSS dasar page-break-* untuk kontrol pemutusan halaman. Apa yang tidak dilakukan alat ini, dan di mana Anda harus mencari alternatif: teks yang dapat dipilih / dapat dicari di PDF (gunakan Puppeteer server-side, atau "Simpan sebagai PDF" browser); layout berkualitas buku dengan header berjalan, footer, halaman bernama, catatan kaki (gunakan Prince atau WeasyPrint server-side); eksekusi JavaScript dalam HTML yang dirender (konverter menjalankan HTML melalui html2canvas yang tidak menjalankan skrip dalam konten yang dirender); konten animasi (PDF statis); media query yang bergantung pada konteks cetak (rendering terjadi dalam konteks layar). Untuk kebutuhan sehari-hari "buat PDF dari HTML ini", html2pdf.js cukup baik; untuk pipeline tingkat produksi yang membutuhkan teks PDF asli dan output yang dapat diakses, Puppeteer server-side adalah standar modern.

Privasi: Mengapa Browser-Saja Penting di Sini

Generasi PDF adalah bisnis cloud-SaaS umum, layanan seperti DocRaptor, PDFShift, PDFCrowd, API2PDF mengenakan biaya per PDF yang dihasilkan, biasanya karena mereka menjalankan Puppeteer headless di server farm dan menyerap biaya rendering yang dipercepat GPU. Trade-offnya adalah HTML yang Anda kirimkan ke layanan tersebut diproses di infrastruktur mereka: faktur berisi informasi pelanggan, laporan berisi data bisnis, sertifikat berisi nama pribadi, resume berisi semuanya. Apa pun yang Anda hasilkan, layanan pihak ketiga melihatnya. Alat ini berjalan sepenuhnya di browser Anda melalui html2pdf.js, verifikasi di tab Network DevTools saat Anda mengklik Generate (satu-satunya permintaan keluar adalah mengambil pustaka html2pdf.js dari CDN; setelah dimuat, tidak ada permintaan lebih lanjut). Bawa halaman offline (mode pesawat) setelah pustaka dimuat dan konverter masih bekerja. Aman untuk HTML yang berisi nama pelanggan, data keuangan, template internal, atau konten apa pun yang tidak ingin Anda salin ke hard drive orang asing.

Pertanyaan yang Sering Diajukan

Fitur HTML/CSS apa saja yang didukung?

html2pdf mendukung HTML dan CSS standar, termasuk tata letak, font, warna, gambar, dan tabel. Fitur lanjutan (animasi, JavaScript, media query) terbatas. Untuk hasil terbaik, gunakan CSS inline atau tag <style> daripada stylesheet eksternal.

Bagaimana cara menyertakan gambar dalam HTML saya?

Gunakan URI data untuk gambar atau pastikan URL gambar eksternal dapat diakses dan kompatibel CORS. Gambar yang dienkode Base64 berfungsi dengan andal. Contoh: <img src="data:image/png;base64,…" />

Mengapa teks tidak dapat dipilih di PDF?

Karena html2pdf.js merender HTML ke gambar canvas terlebih dahulu, kemudian menyematkan gambar di PDF. "Teks" PDF sebenarnya adalah gambar raster teks, bukan glyph teks asli. Ini adalah trade-off untuk kesetiaan visual: PDF terlihat persis seperti preview browser, tetapi Anda tidak bisa mencari, menyalin, atau menggunakan screen reader padanya. Untuk teks PDF yang dapat dipilih sungguhan, alternatifnya adalah: gunakan "Simpan sebagai PDF" built-in browser (File, Cetak, Simpan sebagai PDF, menghasilkan teks yang dapat dipilih dan gratis); gunakan alat server-side seperti page.pdf() Puppeteer yang memiliki pipeline generasi PDF penuh Chromium; atau tulis JavaScript yang memanggil primitif doc.text() jsPDF langsung (jauh lebih banyak pekerjaan).

Mengapa pratinjau saya berbeda dari PDF?

Pratinjau menampilkan rendering HTML Anda di browser. Beberapa fitur CSS ditampilkan berbeda di PDF. Uji tata letak yang kompleks sebelum membuat PDF akhir, dan sesuaikan margin atau ukuran font jika perlu.

Bisakah saya menambahkan jeda halaman dalam HTML saya?

Ya, gunakan jeda halaman CSS: tambahkan page-break-before: always; atau page-break-after: always; ke elemen apa pun. Di CSS3, gunakan break-before: page; atau break-after: page; untuk kompatibilitas yang lebih baik.

Apakah HTML saya diunggah ke server?

Tidak. HTML yang Anda tempel dan PDF yang dihasilkan keduanya tetap di browser Anda. Satu-satunya permintaan jaringan adalah untuk pustaka html2pdf.js itu sendiri yang dimuat dari CDN publik pada saat memuat halaman; setelah dimuat, tidak ada permintaan keluar lebih lanjut. Verifikasi di tab Network DevTools saat Anda mengklik Generate, atau bawa halaman offline (mode pesawat) setelah pustaka dimuat dan konverter masih bekerja. Aman untuk HTML yang berisi data pelanggan, detail keuangan, template bisnis internal, atau konten apa pun yang tidak ingin Anda lihat oleh layanan PDF pihak ketiga.

Alat terkait

Konversi PDF ke Gambar Markdown ke HTML Konverter Minifier HTML