Membuat PDF dengan React-PDF pada alukerja.com: Panduan Lengkap & Konversi HTML ke PDF

Pada alukerja.com, Anda dapat menghasilkan dokumen PDF secara otomatis dari data SOP (Standard Operating Procedure) menggunakan React-PDF. Salah satu fitur unggulan di sini adalah kemampuan mengonversi konten HTML (rich text) menjadi elemen PDF yang rapi dan konsisten, berkat komponen HtmlRenderer.

1. Konversi HTML ke PDF dengan HtmlRenderer

Seringkali, penjelasan SOP atau instruksi ditulis dalam format HTML (misal: hasil dari editor WYSIWYG). Agar konten ini bisa tampil dengan baik di PDF, digunakan komponen HtmlRenderer. Komponen ini bertugas mengubah tag-tag HTML seperti <p>, <ul>, <ol>, <li>, <strong>, <em>, dan lain-lain menjadi elemen React-PDF (<Text>, <View>, dsb) dengan style yang sudah disesuaikan.

a. Cara Kerja HtmlRenderer

• Menggunakan library html-react-parser untuk mem-parsing HTML string.
• Setiap elemen HTML di-mapping ke komponen React-PDF yang sesuai.
• Mendukung list (bullet & numbering), bold, italic, underline, dan paragraph.
• Hasilnya, konten HTML dari database atau editor bisa langsung dirender ke PDF tanpa kehilangan format.

Contoh penggunaan di dalam PDF:

{participant.documentation && (
  <HtmlRenderer html={participant.documentation} />
)}

Kode di atas akan mengubah HTML penjelasan peserta menjadi elemen PDF yang siap cetak.

b. Contoh Implementasi HtmlRenderer

const HtmlRenderer: React.FC<{ html: string }> = ({ html }) => {
  // ...parsing dan mapping HTML ke React-PDF
  return <>{parse(html, options)}</>;
};

Komponen ini akan otomatis menangani tag-tag HTML umum dan mengubahnya ke format PDF.

2. Struktur Komponen PDF

Selain HtmlRenderer, struktur PDF dibangun dengan komponen SopPDF.tsx yang memanfaatkan @react-pdf/renderer. Setiap bagian SOP (cover, flowchart, penjelasan peserta, penjelasan tahap) di-render dalam halaman terpisah, dan setiap konten HTML di dalamnya diproses oleh HtmlRenderer.

3. Proses Backend

Backend menyediakan endpoint untuk generate PDF secara real-time, mengambil data SOP beserta konten HTML-nya, lalu merendernya ke PDF menggunakan React-PDF dan HtmlRenderer.

4. Tips

• Pastikan konten HTML sudah bersih dan sesuai standar (gunakan editor WYSIWYG yang baik).
• Untuk styling, sesuaikan di file style React-PDF agar hasil PDF konsisten dengan branding.

Dengan pendekatan ini, Anda bisa dengan mudah mengonversi konten HTML menjadi PDF yang profesional di alukerja.com, tanpa perlu repot mengatur format manual.