Base64 Pdf Viewer Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

28

Share

Menampilkan PDF Base64 di JavaScript

Dalam dunia pengembangan web, seringkali kita perlu menampilkan dokumen PDF di dalam browser. Salah satu cara untuk mencapai hal ini adalah dengan menggunakan data PDF dalam format Base64.

Base64 adalah metode encoding data biner ke dalam format teks yang aman untuk ditransmisikan melalui internet. Dengan menyandikan data PDF ke dalam format Base64, kita dapat dengan mudah menyimpannya dalam variabel JavaScript dan menampilkannya di browser menggunakan library PDF viewer JavaScript.

Berikut adalah contoh cara menampilkan PDF Base64 di JavaScript:

1. Membuat fungsi untuk menampilkan PDF Base64

function displayPDF(base64Data) {
  const pdfData = atob(base64Data.split(',')[1]);
  const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
  const pdfUrl = URL.createObjectURL(pdfBlob);

  // Menampilkan PDF di dalam iframe
  const pdfViewer = document.getElementById('pdfViewer');
  pdfViewer.src = pdfUrl;
}

Kode ini melakukan hal berikut:

1. Mengubah data Base64 ke dalam data biner menggunakan fungsi atob().
2. Membuat objek Blob dari data biner, yang mewakili file PDF.
3. Membuat URL objek dari Blob menggunakan URL.createObjectURL(), yang merupakan URL yang dapat diakses oleh browser.
4. Menampilkan PDF di dalam iframe dengan menugaskan URL objek ke src iframe.

2. Memanggil fungsi dengan data Base64

Anda dapat memanggil fungsi displayPDF() dengan data Base64 Anda. Misalnya, Anda dapat mengambil data Base64 dari API, dari penyimpanan lokal, atau dari sumber lainnya.

// Contoh data Base64 PDF
const base64Data = 'data:application/pdf;base64,JVBERi0xLjMKJcfs...'

// Memanggil fungsi displayPDF()
displayPDF(base64Data);

3. Menambahkan iframe ke dalam halaman HTML

Anda perlu menambahkan iframe ke dalam HTML Anda untuk tempat menampilkan PDF.

Tips tambahan

• Gunakan library PDF viewer JavaScript seperti PDF.js untuk pengalaman pengguna yang lebih baik dan fitur yang lebih lengkap.
• Pastikan Anda mengizinkan JavaScript untuk mengakses konten PDF di browser.
• Untuk keamanan, disarankan untuk memvalidasi dan membersihkan data Base64 sebelum menampilkannya di browser.

Dengan menggunakan teknik ini, Anda dapat dengan mudah menampilkan PDF Base64 di halaman web Anda dan memberikan pengalaman yang lebih baik bagi pengguna Anda.