Base64 To File Javascript Download

4 min read Jun 18, 2024

Mengubah Base64 ke File dan Download di JavaScript

Artikel ini akan membahas cara mengubah data Base64 ke file dan mengunduhnya menggunakan JavaScript.

Memahami Base64

Base64 adalah skema pengkodean yang digunakan untuk merepresentasikan data biner dalam format teks ASCII. Ini berguna untuk mentransfer data biner melalui protokol yang hanya mendukung teks, seperti email.

Langkah-Langkah Mengubah Base64 ke File

Berikut adalah langkah-langkah yang diperlukan untuk mengubah data Base64 ke file dan mengunduhnya:

Membuat Blob:

Pertama, kita perlu membuat objek Blob dari data Base64. Objek Blob merepresentasikan data biner yang dapat diunduh.

const base64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
const byteString = atob(base64Data.split(',')[1]);
const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
  ia[i] = byteString.charCodeAt(i);
}
const blob = new Blob([ab], { type: mimeString });

Membuat URL Objek:

Setelah membuat objek Blob, kita dapat membuat URL objek menggunakan URL.createObjectURL(). URL ini mengarah ke file yang direpresentasikan oleh Blob.
```
const url = URL.createObjectURL(blob);
```

Membuat Link Download:

Selanjutnya, kita perlu membuat elemen <a> yang akan digunakan untuk mengunduh file.

const link = document.createElement('a');
link.href = url;
link.download = 'nama_file.png'; // Ganti nama_file.png dengan nama file yang diinginkan

Mengklik Link:

Terakhir, kita klik elemen <a> untuk memulai download.

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

Contoh Kode Lengkap:

function downloadBase64File(base64Data, filename) {
  const byteString = atob(base64Data.split(',')[1]);
  const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([ab], { type: mimeString });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// Contoh penggunaan
const base64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
downloadBase64File(base64Data, 'gambar.png');

Penjelasan Kode:

Fungsi downloadBase64File menerima data Base64 dan nama file sebagai parameter.
Fungsi tersebut mengubah data Base64 menjadi objek Blob dan membuat URL objek.
Selanjutnya, fungsi membuat elemen <a> dengan atribut href dan download yang dikonfigurasi sesuai dengan URL dan nama file yang diberikan.
Terakhir, fungsi mengklik elemen <a> untuk memulai download dan kemudian menghapus elemen tersebut dari DOM.

Kesimpulan

Artikel ini membahas bagaimana cara mengubah data Base64 ke file dan mengunduhnya menggunakan JavaScript. Dengan menggunakan kode yang diberikan, Anda dapat dengan mudah mengunduh file dari data Base64.