JavaScript Academy · Leçon

Blobs et URL d’objet

Créez et utilisez des URL de blob pour les téléchargements.

Blobs et URL d’objet est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce qu’un objet binaire volumineux ?

Un objet binaire volumineux représente des données brutes immuables, comme le contenu d’un fichier, en mémoire. Les fichiers constituent un type particulier d’objet binaire volumineux, avec un nom et une date de modification.

Les objets binaires volumineux vous permettent de construire, de découper et de télécharger des données binaires dans le navigateur.

Créer un objet binaire volumineux

Construisez un objet binaire volumineux à partir d’un tableau de parties (chaînes, tampons ou autres objets binaires) et d’un objet d’options indiquant le type MIME.

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

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

Objet binaire volumineux composé de plusieurs parties

Le tableau de parties est concaténé dans l’ordre. Vous pouvez mélanger des chaînes et des tableaux typés.

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

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

Relire un objet binaire volumineux

Les objets binaires volumineux exposent les méthodes fondées sur les promesses text(), arrayBuffer() et stream() pour lire leur contenu.

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

show();

Découper un objet binaire volumineux

blob.slice(start, end) renvoie un nouvel objet binaire volumineux couvrant une partie de l’original, sans copier l’ensemble des données. C’est utile pour les téléversements par morceaux.

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

console.log(chunk.size);

Créer une URL d’objet

URL.createObjectURL(blob) renvoie une URL à courte durée de vie pointant vers l’objet binaire volumineux conservé en mémoire. Vous pouvez l’utiliser comme img.src, comme attribut href d’un lien ou comme source d’une vidéo.

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

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

Prévisualiser une image téléversée

Transformez un fichier sélectionné en URL d’objet et affectez cette URL à un élément d’image pour obtenir un aperçu instantané, sans aller-retour avec le serveur.

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

console.log('preview ready');

Déclencher un téléchargement

Créez un objet binaire volumineux, générez une URL d’objet, puis déclenchez un clic sur une ancre temporaire dotée de l’attribut download afin d’enregistrer un fichier généré.

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');

Révoquer les URL d’objet

Les URL d’objet conservent l’objet binaire volumineux en mémoire jusqu’à l’appel de URL.revokeObjectURL(url). Révoquez-les toujours lorsque vous avez terminé afin d’éviter les fuites de mémoire.

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

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

Objets binaires et JSON

Vous pouvez créer un fichier JSON téléchargeable en convertissant les données en chaîne dans un objet binaire volumineux avec le type MIME approprié.

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');

Pourquoi les objets binaires volumineux sont importants

Les objets binaires volumineux et les URL d’objet vous permettent de gérer les données binaires entièrement côté client : prévisualiser des téléversements, générer des téléchargements et découper des fichiers volumineux. Pensez à révoquer les URL lorsque vous avez terminé. Ensuite, vous enverrez des fichiers à un serveur avec 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);

Vérification rapide

Après avoir utilisé une URL d’objet pour un téléchargement, qu devez-vous appeler pour libérer la mémoire ?

Récapitulatif : objets binaires et URL d’objet

Vous avez appris à gérer les données binaires :

new Blob(parts, { type }) construit des données binaires immuables.
Lisez-les avec text() et arrayBuffer() ; découpez-les avec slice().
URL.createObjectURL crée une URL blob: utilisable pour les prévisualisations et les téléchargements.
Appelez toujours URL.revokeObjectURL lorsque vous avez terminé afin de libérer la mémoire.

Questions Fréquemment Posées

La leçon « Blobs et URL d’objet » est-elle gratuite ?

Oui — le texte complet de « Blobs et URL d’objet » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Blobs et URL d’objet » ?

Créez et utilisez des URL de blob pour les téléchargements. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Blobs et URL d’objet » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy