O Blob (Binary Large Object) no JavaScript atua como uma representação de dados brutos e imutáveis, assemelhando-se a um arquivo. Embora o nome sugira um foco exclusivo em fluxos binários, ele pode encapsular qualquer tipo de dado, incluindo textos simples, estrutursa JSON, imagens ou vídeos, independentemente de serem formatos nativos do ecossistema JavaScript.

Características Fundamentais

• Imutabilidade: Após a instanciação, o conteúdo interno não pode ser alterado diretamente. Para modificar os dados, é necessário criar um novo objeto.
• Comportamento de Arquivo: Funcioan de maneira análoga a um arquivo do sistema operacional, permitindo que a API da Web o trate como tal em diversas operações.
• Tipagem MIME: Possui a propriedade type, que define o formato dos dados (por exemplo, application/json ou image/jpeg).
• Dimensão: A propriedade size indica o volume total de bytes armazenados no objeto.

Instanciação

A construção de um Blob é feita através do seu construtor, que recebe uma sequência de dados e um objeto de configuração:

• sourceData: Um iterável contendo fragmentos de dados, que podem ser strings, objetos ArrayBuffer, TypedArray (como Uint8Array) ou até mesmo outros Blobs.
• config: Um dicionário opcional onde se define o type (MIME) e o endings (para normalização de quebras de linha).

// Estruturando um payload JSON e convertendo para Blob
const payload = { user: "admin", role: "superuser", active: true };
const jsonString = JSON.stringify(payload);

const jsonBlob = new Blob([jsonString], { type: 'application/json' });

console.log(`Tamanho em bytes: ${jsonBlob.size}`);
console.log(`Formato MIME: ${jsonBlob.type}`);

Casos de Uso Práticos

Geração de Object URLs

A API URL.createObjectURL permite mapear um Blob para uma URL temporária. Isso é extremamente útil para acionar downloads no navegador ou inicializar Web Workers sem a necessidade de um arquivo físico hospedado em um servidor.

// Criando um arquivo CSV dinâmico para download
const csvContent = "id,name,status\n1,Alice,active\n2,Bob,inactive";
const csvBlob = new Blob([csvContent], { type: 'text/csv' });
const downloadLink = URL.createObjectURL(csvBlob);

// Configurando o elemento de âncora para forçar o download
const anchor = document.createElement('a');
anchor.setAttribute('href', downloadLink);
anchor.setAttribute('download', 'usuarios_exportados.csv');
anchor.innerText = 'Exportar CSV';
document.body.appendChild(anchor);

// Revogando a URL após o uso para liberar memória (boa prática)
// URL.revokeObjectURL(downloadLink);

Extração e Leitura do Conteúdo

Para acessar os dados encapsulados, pode-se utilizar a API FileReader ou os métodos assíncronos nativos do próprio Blob (como text() ou arrayBuffer()). Abaixo, demonstramos a leitura utilizando o FileReader para processar um trecho HTML.

const htmlSnippet = "<h1>Relatório Gerado</h1><p>Dados processados com sucesso.</p>";
const htmlBlob = new Blob([htmlSnippet], { type: 'text/html' });

const fileParser = new FileReader();

fileParser.addEventListener('load', (event) => {
    const extractedContent = event.target.result;
    console.log("Conteúdo HTML lido:", extractedContent);
});

fileParser.readAsText(htmlBlob);