HTML to PDF Converter

Alat utilitas sederhana namun powerful untuk mengubah tampilan web menjadi dokumen PDF siap cetak. Sepenuhnya berjalan di sisi klien (Client-Side Rendering) untuk menjamin privasi data pengguna.

Mengapa Client-Side?

Banyak konverter HTML-ke-PDF menggunakan API backend (seperti Puppeteer) yang:

Mahal di resource server.
Lambat karena harus upload/download data.
Kurang Privasi karena konten dikirim ke server lain.

Solusi ini menggunakan kombinasi html2canvas (untuk menangkap visual DOM sebagai gambar) dan jsPDF (untuk menyusun gambar tersebut ke dalam format dokumen PDF).

Tantangan Implementasi

Salah satu masalah terbesar adalah "Page Break" (pemotongan halaman). Karena html2canvas mengambil "screenshot" panjang dari seluruh halaman, memotongnya secara paksa seringkali membelah teks atau gambar di tengah-tengah.

Solusi: Saya mengimplementasikan algoritma pemotongan cerdas yang mendeteksi elemen container. Sebelum memotong, skrip akan mengecek apakah garis potong menabrak elemen penting. Jika ya, ia akan menggeser konten ke halaman berikutnya.

// Pseudo-code logika page break
if (elementBottom > pageHeight) {
  pdf.addPage();
  currentHeight = 0; // Reset cursor
  pdf.addImage(element, ...);
}