Tanpa unggah, 100% lokal, tanpa akun

HTML ke PDF

Tempel HTML, pilih ukuran halaman, dan unduh PDF, semua dirender di browser.

Cara kerja HTML ke PDF

HTML ke PDF mengambil markup HTML yang Anda tempel ke dalam editor, membersihkannya dengan DOMPurify untuk menghapus skrip dan atribut yang tidak aman, merendernya ke kanvas di luar layar menggunakan html2canvas, dan mengenkodenya ke dalam PDF menggunakan jsPDF. Seluruh pipeline berjalan di dalam tab browser Anda; tidak ada kode HTML atau keluaran yang dirender yang dikirim ke server mana pun. Ini membuatnya cocok untuk mengonversi potongan HTML yang berisi data pribadi yang tidak ingin Anda tempel ke layanan online.

Pahami format keluaran sebelum Anda mengandalkannya. Halaman PDF adalah gambar raster, bukan teks vektor. Teks dalam keluaran tidak dapat dipilih, tidak dapat dicari, dan tidak dapat dialirkan ulang. Sumber daya eksternal seperti gambar yang direferensikan oleh URL diblokir oleh kebijakan CORS browser dan tidak akan dimuat. Gaya inline dan CSS yang disematkan berfungsi, tetapi tata letak yang kompleks dengan fon web khusus atau CSS grid tingkat lanjut mungkin tidak dirender secara akurat. Untuk konversi halaman web lengkap yang setia pada dokumen, browser tanpa kepala yang berjalan di sisi server adalah alat yang lebih sesuai.

Ditulis oleh Bastien Sulyan

Cara menggunakan HTML ke PDF, langkah demi langkah

  1. Tempel markup HTML Anda ke dalam area editor.
  2. Opsional sesuaikan ukuran halaman (A4 atau Letter) dan orientasinya.
  3. Klik convert; DOMPurify membersihkan HTML dan html2canvas merendernya.
  4. Tunggu jsPDF mengenkode keluaran kanvas sebagai halaman PDF.
  5. Unduh PDF.

Kasus penggunaan umum

  • Anda menghasilkan faktur HTML di browser dari templat lokal dan ingin salinan PDF tanpa mengirimkan email ke layanan konversi.
  • Laporan HTML sederhana yang dibangun dari data API perlu disimpan sebagai PDF untuk pengarsipan; tempel HTML dan konversi secara lokal.
  • Anda menulis templat email HTML yang ditata dan ingin pratinjau tampilannya saat dicetak sebagai PDF.
  • Pengembang membutuhkan PDF cepat dari fragmen HTML selama pengujian, tanpa menyiapkan browser tanpa kepala sisi server.

Pertanyaan yang sering diajukan

Mengapa teks dalam PDF keluaran tidak dapat dipilih?

Pipeline konversi merender HTML ke bitmap kanvas menggunakan html2canvas, lalu mengenkode bitmap tersebut sebagai data gambar di dalam halaman PDF dengan jsPDF. Keluarannya adalah gambar raster, bukan lapisan teks. Jika Anda membutuhkan PDF dengan teks yang dapat dipilih, Anda memerlukan browser tanpa kepala sisi server seperti Puppeteer, yang dengan sengaja dihindari alat ini untuk menjaga pemrosesan tetap lokal.

Mengapa gambar dalam HTML saya tidak muncul dalam PDF?

Gambar yang dimuat dari URL eksternal tunduk pada kebijakan CORS browser. Jika server gambar tidak mengirimkan header CORS yang permisif, html2canvas tidak dapat membaca data piksel dan slot gambar dirender kosong. Gambar berkode base64 inline yang disematkan langsung dalam HTML atau gambar dari asal yang sama berfungsi tanpa batasan ini.

Apakah HTML yang saya tempel dikirim ke server?

Tidak. HTML tetap berada di memori browser selama proses berlangsung. DOMPurify membersihkannya di sisi klien, html2canvas merendernya di sisi klien, dan jsPDF mengenkode PDF di sisi klien. Tidak ada yang meninggalkan tab browser.

Apa yang dihapus oleh pembersihan DOMPurify?

DOMPurify menghapus tag skrip, atribut penangan peristiwa seperti onclick dan onload, URL javascript:, dan konstruksi lain yang dapat menjalankan kode. DOMPurify mempertahankan markup struktural dan styling, sehingga keluaran yang dirender terlihat sama tetapi aman untuk disisipkan ke dalam konteks dokumen.

Bisakah saya mengonversi URL halaman web lengkap alih-alih menempel HTML?

Tidak. Alat ini bekerja dengan markup HTML yang Anda tempel langsung. Memuat URL akan memerlukan pengambilan halaman, yang menghadapi batasan CORS untuk sebagian besar situs dan akan melibatkan permintaan jaringan yang membawa operasi ke luar model pemrosesan lokal.