JavaScript Blob

Um Blob (abreviação de Binary Large Object) representa dados imutáveis, brutos e semelhantes a arquivos. É a forma padrão de transportar blocos de conteúdo binário no navegador — textos, imagens, áudio, PDFs, qualquer coisa — sem precisar convertê-los para um tipo nativo de JavaScript como string ou Array. Um Blob é opaco: armazena bytes junto a um type MIME, e você lê esses bytes de forma assíncrona quando precisar.

Os Blobs estão no centro do gerenciamento de arquivos na web. Um File é, na verdade, um Blob especializado com nome e data de modificação; fetch() pode retornar o corpo de uma resposta como Blob; e o canvas, a área de transferência e o mecanismo de download todos trabalham com Blobs. Este guia aborda como criar, dividir, vincular, ler e converter Blobs, além das armadilhas mais comuns.

O que é um Blob, de fato

Um Blob expõe duas propriedades somente leitura e alguns métodos assíncronos de leitura:

• blob.size — o comprimento dos dados em bytes.
• blob.type — a string do tipo MIME (vazia "" se nenhuma foi fornecida).
• blob.slice(start, end, type) — retorna um novo Blob para um intervalo de bytes, sem copiar os dados subjacentes.
• blob.text(), blob.arrayBuffer(), blob.bytes(), blob.stream() — leitores baseados em promises (ou em streams).

Como um Blob é imutável, nenhum desses métodos altera o original — eles sempre retornam um novo Blob ou uma nova leitura dos bytes.

Criando objetos Blob

Você cria um Blob com seu construtor, que recebe dois argumentos: um array de partes e um objeto de opções opcional.

new Blob(parts, options);

Cada item em parts pode ser uma string, um ArrayBuffer, um TypedArray/DataView ou outro Blob — eles são concatenados em ordem. A string options.type é o tipo MIME, que indica aos consumidores como interpretar os bytes (por exemplo, "text/plain", "image/jpeg", "application/json" ou "audio/mpeg"). Consulte tipos MIME para uma visão completa.

Combinando e dividindo Blobs

Como os Blobs são imutáveis, você os "edita" construindo um novo Blob a partir de partes existentes. Você pode misturar strings e Blobs livremente no array de partes:

Para fazer o caminho inverso e extrair um intervalo de bytes, use blob.slice(start, end). Funciona como Array.prototype.slice: end é exclusivo e índices negativos contam a partir do final.

Trabalhando com URLs de Blob

Uma URL de Blob (também chamada de URL de objeto) é uma URL blob: de curta duração que aponta para um Blob mantido em memória. Você pode usá-la em qualquer lugar que aceite uma URL — um <img src>, um link de download <a href>, um elemento <audio> — para que o navegador leia o Blob como se fosse um recurso remoto.

Gerando URLs de Blob

URL.createObjectURL(blob) retorna uma URL exclusiva a cada chamada:

Revogando URLs de Blob

Cada URL de objeto mantém seu Blob vivo na memória até que o documento seja descarregado — mesmo após o elemento que a usa ter sido removido. Para evitar vazamentos de memória, chame URL.revokeObjectURL(url) quando não precisar mais dela:

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

Iniciando o download de um arquivo

Um caso de uso comum no mundo real é permitir que o usuário baixe dados gerados pelo script, sem nenhuma requisição ao servidor. Crie um Blob, envolva-o em uma URL de objeto, clique em um link temporário e, em seguida, revogue:

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!");

Lendo o conteúdo de um Blob

Os leitores modernos baseados em promises são a forma mais simples de extrair bytes de um Blob:

A API mais antiga de FileReader faz o mesmo trabalho usando eventos em vez de promises. Ainda é útil quando você precisa de eventos de progresso ou precisa dar suporte a código legado:

Para Blobs muito grandes, você pode transmitir os bytes com blob.stream() em vez de carregar tudo na memória de uma vez; blob.arrayBuffer() fornece um ArrayBuffer bruto quando você precisa de acesso de baixo nível aos dados binários.

Convertendo um Blob para Base64

O Base64 permite incorporar dados binários em contextos que aceitam apenas texto, como payloads JSON ou data URLs. FileReader.readAsDataURL() produz uma URL data: cujo conteúdo é codificado em Base64:

Armadilhas comuns

• Blobs são imutáveis. Não existe método para adicionar ou reescrever um Blob — construa um novo a partir das partes desejadas.
• A leitura é sempre assíncrona. text(), arrayBuffer() e FileReader retornam seus resultados de forma assíncrona, portanto use await ou .then(); os bytes nunca estão disponíveis de forma síncrona.
• size conta bytes, não caracteres. Caracteres UTF-8 com múltiplos bytes se acumulam: new Blob(["é"]).size é 2, não 1.
• Revogue suas URLs de objeto. Um createObjectURL esquecido mantém seu Blob na memória durante toda a vida da página.
• type é apenas um rótulo. Definir type: "image/png" não valida que os bytes sejam um PNG; apenas anuncia o tipo MIME pretendido.

Onde os Blobs são usados

• Upload de arquivos. Envie um Blob (ou um File) como corpo de uma requisição fetch(), opcionalmente dentro de um FormData.
• Downloads gerados. Construa CSV, JSON ou texto dinamicamente e entregue ao usuário por meio de uma URL de objeto, conforme mostrado acima.
• Trabalho com canvas e imagens. canvas.toBlob(callback, type) converte um <canvas> em um Blob de imagem que pode ser enviado ou baixado.
• Streaming de dados grandes. Divida e transmita grandes payloads binários sem carregar tudo na memória de uma vez.

Conclusão

Um Blob é o contêiner do navegador para dados binários brutos e imutáveis: crie-o a partir de strings ou buffers, divida-o sem copiar, vincule-o por meio de uma URL de objeto e leia-o de volta com text(), arrayBuffer() ou FileReader. Lembre-se de que Blobs são imutáveis, as leituras são assíncronas e as URLs de objeto devem ser revogadas. Com essas regras em mente, você pode mover arquivos, gerar downloads e processar mídia inteiramente no cliente.

Para se aprofundar, explore as APIs relacionadas: File e FileReader e ArrayBuffer e typed arrays.

Prática