24.12.2024

Extraindo uma String de um Objeto Blob em JavaScript: Uma Solução

Resposta Rápida

Para obter uma string de um objeto Blob, use o método FileReader.readAsText() desta forma:

const blob = new Blob(['Texto de exemplo'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // Saída: "Texto de exemplo"
reader.readAsText(blob);

Após o Blob ser carregado, o evento onload é acionado, exibindo a string recuperada.

Operações de Métodos de Leitura de Blob

JavaScript oferece vários métodos para trabalhar com Blob, e o FileReader é apenas um deles.

Leitura Assíncrona de Blob: Conheça blob.text()

A função blob.text() retorna uma promise que se resolve em uma string de texto ao completar.

const blob = new Blob(['Olá, mundo assíncrono'], { type: 'text/plain' });
blob.text().then(text => console.log(text)); // É hora de nossa FileReader se aposentar?

Blob como Resposta: A Promise Chegou Novamente

Converta um Blob em um Response e recupere uma string usando o método .text(), que, assim como o exemplo anterior, retorna uma promise.

const blob = new Blob(['Blob se transforma em uma promise'], { type: 'text/plain' });
new Response(blob).text().then(console.log); // Vamos dar boas-vindas ao nosso novo participante!

Deixe o fetch() Fazer o Trabalho Pesado

Crie uma URI de Blob usando URL.createObjectURL(), e lembre-se de liberar os recursos com URL.revokeObjectURL() para evitar vazamentos de memória.

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

fetch(blobUrl).then(response => response.text())
.then(text => {
  console.log(text); // Pronto!
  URL.revokeObjectURL(blobUrl); 
});

A Elegância de async/await

Use async/await para um código mais limpo, evitando o "inferno dos callbacks".

const blob = new Blob(['Aguardando a string'], { type: 'text/plain' });

async function getBlobText(blob) {
  return await blob.text();
}

getBlobText(blob).then(console.log); // É assim que as operações assíncronas se tornam fáceis!

Não esqueça de tratar possíveis erros usando try/catch.

Visualização

Imagine um Blob (🔒📦) que guarda segredos do seu Diário (📔).

Do diário secreto (📔) para Blob (🔒📦)

Como você revela seu conteúdo?

let diaryBlob = new Blob(['Segredos'], { type: 'text/plain' });

Destravando a fechadura: 🗝️

let unlockBlob = async (blob) => {
  let text = await blob.text(); // E o diário está aberto!
  return text; 
};

Seu diário está livre novamente: 📔🔓

Os segredos do diário revelados: "Segredos"

Mantendo os Dados em Curto Prazo

Tipo de Blob: Sua Defesa

Sempre especifique o type ao criar um Blob para evitar mudanças inesperadas nos dados.

const textBlob = new Blob(['Imprimindo texto'], { type: 'text/plain' });

Strings como Arrays: Segurança na Embalagem

Envolva strings em um array ao passá-las para o construtor Blob para manter o formato dos dados.

const lines = ['Linha 1', 'Linha 2', 'Linha 3'];
const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
// Preservando a ordem com todas as quebras de linha.

Acessando Dados do Blob: O Timing é Crucial

Os dados do Blob estão disponíveis somente após o evento FileReader.onload, então tenha cuidado.

const immediateBlob = new Blob(['Agora ou nunca'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => {
  console.log('Blob sussurra:', reader.result);
};
reader.readAsText(immediateBlob);
// Os dados só estão disponíveis após este evento!

Recursos Úteis

1. Usando Arquivos em Aplicações Web - Web API | MDN — Um guia para manipulação de arquivos em aplicações web.
2. Como Converter um Blob em uma String em JavaScript - Stack Overflow — Várias abordagens para trabalhar com Blob.
3. Blob - Web API | MDN — Tudo o que você precisa saber sobre Blob.
4. Lendo Arquivos em JavaScript | Artigos | web.dev — Quando trabalhar com Blob é mais do que apenas um interesse acadêmico.
5. File API — A especificação oficial.
6. FileReader: método readAsText() - Web API | MDN — Detalhes sobre FileReader.
7. Response: método blob() - Web API | MDN — Como trabalhar com Blob através de Response.blob().

Video

Navigation