Cara Menampilkan PDF di HTML5 Canvas Menggunakan PDF.js

Metode Render PDF ke Canvas

Secara teknis, elemen HTML5 <canvas> tidak dapat membaca file PDF secara langsung. Untuk menampilkan PDF, Anda wajib menggunakan pustaka JavaScript pihak ketiga, dengan PDF.js dari Mozilla sebagai standar industri yang paling stabil dan aman. PDF.js bekerja dengan cara memproses file PDF menjadi data gambar yang kemudian dirender ke dalam konteks 2D canvas.

Langkah Implementasi Teknis

Pastikan Anda telah menyertakan pustaka PDF.js melalui CDN atau instalasi lokal. Berikut adalah implementasi dasar untuk merender halaman pertama dari sebuah dokumen PDF.

<canvas id="pdf-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<script>
  const url = 'dokumen.pdf';
  pdfjsLib.getDocument(url).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const scale = 1.5;
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.getElementById('pdf-canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const renderContext = { canvasContext: context, viewport: viewport };
      page.render(renderContext);
    });
  });
</script>

Tabel Perbandingan Metode Tampilan PDF

Tips Troubleshooting

• Cross-Origin Resource Sharing (CORS): Pastikan file PDF berada di domain yang sama atau server mengizinkan akses CORS, jika tidak, proses render akan gagal.
• Resolusi: Gunakan properti devicePixelRatio untuk memastikan teks PDF tetap tajam pada layar Retina atau resolusi tinggi.
• Performa: Jika dokumen memiliki banyak halaman, jangan merender semua halaman sekaligus. Gunakan teknik lazy loading atau pagination untuk menjaga performa browser pengguna.
• Worker: Selalu gunakan pdfjsLib.GlobalWorkerOptions.workerSrc untuk memindahkan proses parsing PDF ke background thread agar UI tidak membeku (freeze).