JavaScript Academy · Pelajaran

Blob dan URL Objek

Buat dan gunakan URL blob untuk unduhan.

Blob dan URL Objek adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Blob?

Blob (Objek Biner Besar) merepresentasikan data mentah yang tidak dapat diubah, seperti isi berkas, di memori. Berkas adalah jenis khusus Blob yang memiliki nama dan tanggal perubahan.

Blob memungkinkan Anda membuat, membagi, dan mengunduh data biner di peramban.

Membuat Blob

Buat Blob dari larik bagian (teks, buffer, atau Blob lainnya) dan objek opsi yang menentukan MIME type.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

Blob dari Beberapa Bagian

Larik bagian digabungkan sesuai urutan. Anda dapat mencampur string dan larik bertipe.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Membaca Kembali Blob

Blob menyediakan metode berbasis Promise text(), arrayBuffer(), dan stream() untuk membaca isinya.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Membagi Blob

blob.slice(start, end) mengembalikan Blob baru yang mencakup sebagian dari Blob asli, tanpa menyalin seluruh isinya. Berguna untuk unggahan secara bertahap.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Membuat URL Objek

URL.createObjectURL(blob) mengembalikan URL berumur pendek yang mengarah ke Blob dalam memori. Anda dapat menggunakannya sebagai img.src, tautan href, atau sumber video.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Menampilkan Pratinjau Gambar yang Diunggah

Ubah berkas yang dipilih menjadi URL objek dan tetapkan ke elemen gambar untuk pratinjau instan, tanpa perlu perjalanan bolak-balik ke server.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Memicu Pengunduhan

Buat Blob, buat URL objek, lalu klik elemen jangkar sementara dengan atribut download untuk menyimpan berkas yang dihasilkan.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Mencabut URL Objek

URL objek menahan Blob di memori sampai Anda memanggil URL.revokeObjectURL(url). Selalu cabut URL setelah selesai untuk mencegah kebocoran memori.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Blob dan JSON

Anda dapat membuat berkas JSON yang dapat diunduh dengan mengubah data menjadi string dalam Blob dengan tipe MIME yang benar.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Mengapa Blob Penting

Blob dan URL objek memungkinkan Anda menangani data biner sepenuhnya di sisi klien: menampilkan pratinjau unggahan, membuat unduhan, dan membagi berkas besar menjadi beberapa bagian. Ingatlah untuk mencabut URL setelah selesai. Selanjutnya, Anda akan mengirim berkas ke server dengan fetch.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Pemeriksaan Singkat

Setelah menggunakan URL objek untuk mengunduh, apa yang harus Anda panggil untuk membebaskan memori?

Ringkasan: Blob dan URL Objek

Anda telah mempelajari cara menangani data biner:

new Blob(parts, { type }) membuat data biner yang tidak dapat diubah.
Baca dengan text(), arrayBuffer(); bagi dengan slice().
URL.createObjectURL membuat URL blob: yang dapat digunakan untuk pratinjau dan unduhan.
Selalu panggil URL.revokeObjectURL setelah selesai untuk membebaskan memori.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Blob dan URL Objek” gratis?

Ya — teks lengkap “Blob dan URL Objek” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Blob dan URL Objek”?

Buat dan gunakan URL blob untuk unduhan. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Blob dan URL Objek” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy