JavaScript Academy · Aula

Blobs e URLs de objetos

Crie e use URLs de blobs para downloads.

Blobs e URLs de objetos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O que é um objeto binário?

Um objeto binário (objeto grande binário) representa dados brutos e imutáveis, como o conteúdo de arquivos, na memória. Arquivos são um tipo especial de objeto binário, com nome e data de modificação.

Objetos binários permitem criar, dividir e baixar dados binários no navegador.

Criando um objeto binário

Crie um objeto binário a partir de uma matriz de partes (cadeias, buffers ou outros objetos binários) e de um objeto de opções que especifique o type MIME.

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

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

Objeto binário com várias partes

A matriz de partes é concatenada na ordem em que aparece. Você pode combinar cadeias e matrizes tipadas.

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

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

Lendo um objeto binário

Objetos binários expõem métodos baseados em Promise, como text(), arrayBuffer() e stream(), para ler seu conteúdo.

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

show();

Dividindo um objeto binário

blob.slice(start, end) retorna um novo objeto binário que cobre parte do original, sem copiar tudo. Isso é útil para envios em partes.

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

console.log(chunk.size);

Criando uma URL de objeto

URL.createObjectURL(blob) retorna uma URL de curta duração que aponta para o objeto binário na memória. Você pode usá-la como img.src, como o href de um link ou como fonte de um vídeo.

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

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

Visualizando uma imagem enviada

Transforme um arquivo selecionado em uma URL de objeto e atribua-a a um elemento de imagem para obter uma visualização instantânea, sem precisar fazer uma requisição ao servidor.

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

console.log('preview ready');

Disparando um download

Crie um objeto binário, gere uma URL de objeto e acione um elemento âncora temporário com um atributo download para salvar um arquivo gerado.

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

Revogando URLs de objeto

As URLs de objeto mantêm o objeto binário na memória até que você chame URL.revokeObjectURL(url). Sempre revogue-as quando terminar para evitar vazamentos de memória.

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

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

Objetos binários e JSON

Você pode criar um arquivo JSON para download transformando dados em uma cadeia e colocando-os em um objeto binário com o tipo MIME correto.

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

Por que objetos binários são importantes

Objetos binários e URLs de objeto permitem lidar com dados binários inteiramente no cliente: visualizar envios, gerar downloads e dividir arquivos grandes em partes. Lembre-se de revogar as URLs quando terminar. Em seguida, você enviará arquivos a um servidor com 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);

Verificação rápida

Depois de usar uma URL de objeto para um download, o que você deve chamar para liberar memória?

Recapitulação: objetos binários e URLs de objeto

Você aprendeu a lidar com dados binários:

new Blob(parts, { type }) cria dados binários imutáveis.
Leia com text() e arrayBuffer(); divida com slice().
URL.createObjectURL cria uma URL blob: utilizável para visualizações e downloads.
Sempre chame URL.revokeObjectURL ao terminar para liberar memória.

Perguntas Frequentes

A aula “Blobs e URLs de objetos” é grátis?

Sim — o texto completo de “Blobs e URLs de objetos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Blobs e URLs de objetos”?

Crie e use URLs de blobs para downloads. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Blobs e URLs de objetos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy