JavaScript Blob

Un Blob (abréviation de Binary Large Object) représente des données immuables, brutes, semblables à des fichiers. C'est la manière standard de faire circuler des morceaux de contenu binaire dans le navigateur — texte, images, audio, PDF, tout et n'importe quoi — sans avoir à les convertir en type JavaScript natif comme une string ou un Array. Un Blob est opaque : il contient des octets ainsi qu'un type MIME, et vous lisez ces octets de manière asynchrone au moment où vous en avez besoin.

Les Blobs sont au cœur de la gestion des fichiers sur le web. Un File est en réalité un Blob spécialisé avec un nom et une date de modification, fetch() peut vous renvoyer un corps de réponse sous forme de Blob, et le canvas, le presse-papiers et le mécanisme de téléchargement parlent tous le langage des Blobs. Ce guide explique comment créer, découper, lier, lire et convertir des Blobs, ainsi que les pièges courants à éviter.

Ce qu'est réellement un Blob

Un Blob expose deux propriétés en lecture seule et quelques méthodes de lecture asynchrones :

• blob.size — la longueur des données en octets.
• blob.type — la chaîne de type MIME (vide "" si aucun n'a été fourni).
• blob.slice(start, end, type) — retourne un nouveau Blob pour une plage d'octets, sans copier les données sous-jacentes.
• blob.text(), blob.arrayBuffer(), blob.bytes(), blob.stream() — lecteurs basés sur des promesses (ou des flux).

Étant donné qu'un Blob est immuable, aucune de ces méthodes ne modifie l'original — elles retournent toujours un nouveau Blob ou une nouvelle lecture des octets.

Créer des objets Blob

Vous créez un Blob avec son constructeur, qui prend deux arguments : un tableau de parties et un objet options facultatif.

new Blob(parts, options);

Chaque élément du tableau parts peut être une string, un ArrayBuffer, un TypedArray/DataView, ou un autre Blob — ils sont concaténés dans l'ordre. La chaîne options.type correspond au type MIME, qui indique aux consommateurs comment interpréter les octets (par exemple "text/plain", "image/jpeg", "application/json", ou "audio/mpeg"). Consultez les types MIME pour un panorama complet.

Combiner et découper des Blobs

Étant donné que les Blobs sont immuables, vous les « modifiez » en construisant un nouveau Blob à partir de parties existantes. Vous pouvez mélanger librement des strings et des Blobs dans le tableau de parties :

Pour faire l'inverse et extraire une plage d'octets, utilisez blob.slice(start, end). Cela fonctionne comme Array.prototype.slice : end est exclu, et les indices négatifs comptent depuis la fin.

Travailler avec les URL Blob

Une URL Blob (aussi appelée URL d'objet) est une URL blob: de courte durée qui pointe vers un Blob conservé en mémoire. Vous pouvez l'utiliser partout où une URL est attendue — un <img src>, un lien de téléchargement <a href>, un élément <audio> — afin que le navigateur puisse lire le Blob comme s'il s'agissait d'une ressource distante.

Générer des URL Blob

URL.createObjectURL(blob) retourne une URL unique à chaque appel :

Révoquer des URL Blob

Chaque URL d'objet maintient son Blob en vie en mémoire jusqu'au déchargement du document — même après que l'élément qui l'utilisait a disparu. Pour éviter les fuites mémoire, appelez URL.revokeObjectURL(url) une fois que vous en avez terminé :

const data = new Blob(["Example text"], { type: "text/plain" });
const blobUrl = URL.createObjectURL(data);

// ...use blobUrl, e.g. as an <a href> or <img src> ...

URL.revokeObjectURL(blobUrl); // frees the memory held by the Blob URL

Déclencher le téléchargement d'un fichier

Un cas d'utilisation courant consiste à laisser l'utilisateur télécharger des données générées par votre script, sans aller-retour vers le serveur. Créez un Blob, encapsulez-le dans une URL d'objet, cliquez sur un lien temporaire, puis révoquez :

function downloadText(filename, text) {
  const blob = new Blob([text], { type: "text/plain" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename; // suggested file name
  a.click();

  URL.revokeObjectURL(url); // clean up immediately after the click
}

downloadText("notes.txt", "Saved from the browser!");

Lire le contenu d'un Blob

Les lecteurs modernes basés sur des promesses sont la manière la plus simple d'extraire des octets d'un Blob :

L'ancienne API FileReader fait le même travail avec des événements à la place des promesses. Elle reste utile lorsque vous avez besoin d'événements de progression ou que vous devez prendre en charge du code hérité :

Pour les très grands Blobs, vous pouvez diffuser les octets avec blob.stream() au lieu de tout charger en mémoire d'un coup, et blob.arrayBuffer() vous donne un ArrayBuffer brut lorsque vous avez besoin d'un accès bas niveau aux données binaires.

Convertir un Blob en Base64

Le Base64 vous permet d'incorporer des données binaires dans des contextes uniquement textuels, tels que des charges utiles JSON ou des URL de données. FileReader.readAsDataURL() produit une URL data: dont la charge utile est encodée en Base64 :

Pièges courants

• Les Blobs sont immuables. Il n'existe aucune méthode pour ajouter du contenu à un Blob ou le réécrire — construisez-en un nouveau à partir des parties souhaitées.
• La lecture est toujours asynchrone. text(), arrayBuffer() et FileReader retournent leurs résultats ultérieurement, donc utilisez await ou .then() ; les octets ne sont jamais disponibles de manière synchrone.
• size compte les octets, pas les caractères. Les caractères UTF-8 multi-octets s'accumulent : new Blob(["é"]).size vaut 2, et non 1.
• Révoquez vos URL d'objets. Un createObjectURL oublié maintient son Blob en mémoire pendant toute la durée de vie de la page.
• type n'est qu'une étiquette. Définir type: "image/png" ne valide pas que les octets constituent bien un PNG ; cela indique seulement le type MIME prévu.

Où les Blobs sont utilisés

• Téléversements de fichiers. Envoyez un Blob (ou un File) comme corps d'une requête fetch(), éventuellement à l'intérieur d'un FormData.
• Téléchargements générés. Construisez du CSV, du JSON ou du texte à la volée et transmettez-le à l'utilisateur via une URL d'objet, comme indiqué ci-dessus.
• Travail sur le canvas et les images. canvas.toBlob(callback, type) transforme un <canvas> en un Blob image que vous pouvez téléverser ou télécharger.
• Diffusion de grandes données. Découpez et diffusez de grandes charges utiles binaires sans tout charger en mémoire d'un seul coup.

Conclusion

Un Blob est le conteneur du navigateur pour les données binaires brutes immuables : créez-en un à partir de strings ou de buffers, découpez-le sans copie, liez-le via une URL d'objet, et relisez-le avec text(), arrayBuffer(), ou FileReader. N'oubliez pas que les Blobs sont immuables, que les lectures sont asynchrones et que les URL d'objets doivent être révoquées. En gardant ces règles à l'esprit, vous pouvez déplacer des fichiers, générer des téléchargements et traiter des médias entièrement côté client.

Pour aller plus loin, explorez l'API associée File et FileReader ainsi que ArrayBuffer et les tableaux typés.

Pratique