Извлечение строки из Blob объекта в JavaScript: решение

Быстрый ответ

Чтобы получить строку из объекта Blob, воспользуйтесь методом FileReader.readAsText() вот так:

const blob = new Blob(['Пример текста'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // Будет выведено "Пример текста"
reader.readAsText(blob);

После того как Blob загружен, срабатывает событие onload и на экран выводится полученная строка.

Опера методов чтения Blob

В JavaScript существуют различные методы для работы с Blob, причём FileReader — это лишь один из них.

Асинхронное чтение Blob: знакомьтесь, это blob.text()

Функция blob.text() возвращает промис, который после выполнения превращается в текстовую строку.

const blob = new Blob(['Привет, асинхронный мир'], { type: 'text/plain' });
blob.text().then(text => console.log(text)); // Нашему FileReader уже пора на покой?

Подробнее об этом расскажет наш спикер на видео

Blob в роли Response: и снова – промис

Превратите Blob в Response и получите строку, используя метод .text(), который, как и предыдущий, возвращает промис.

const blob = new Blob(['Blob превращается в промис'], { type: 'text/plain' });
new Response(blob).text().then(console.log); // Давайте приветствуем нового участника!

Пусть fetch() сделает всю работу

Создайте Blob URI с помощью URL.createObjectURL(), не забыв освободить ресурсы с помощью URL.revokeObjectURL(), чтобы предотвратить утечки памяти.

const blob = new Blob(['Извлекаем данные'], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(blob);

fetch(blobUrl).then(response => response.text())
.then(text => {
  console.log(text); // Готово!
  URL.revokeObjectURL(blobUrl); 
});

Элегантность async/await

Используйте async/await для удобства чтения кода, избегая "ада из коллбэков".

const blob = new Blob(['Ожидайте строки'], { type: 'text/plain' });

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

getBlobText(blob).then(console.log); // Вот как легко становится асинхронность!

Не забывайте о возможных ошибках и обрабатывайте их при помощи try/catch.

Визуализация

Представьте Blob (🔒📦), который хранит тайны из вашего Дневника (📔).

От секретного дневника (📔) к Blob (🔒📦)

Как раскрыть его содержимое?

let diaryBlob = new Blob(['Тайны'], {type: 'text/plain'});

Открываем замок: 🗝️

let unlockBlob = async (blob) => {
  let text = await blob.text(); // И вот дневник открыт!
  return text; 
};

Ваш дневник снова на свободе: 📔🔓

Секреты дневника раскрыты: "Тайны"

Управление данными на коротком поводке

Тип Blob: ваша защита

Всегда задавайте type при создании Blob, чтобы избегать неожиданных изменений данных.

const textBlob = new Blob(['Печатаем текст'], { type: 'text/plain' });

Строки как массивы: безопасность при упаковке

Упаковывайте строки в массив при подаче их в конструктор Blob, чтобы формат данных оставался неизменным.

const lines = ['Строка 1', 'Строка 2', 'Строка 3'];
const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
// Сохраняем порядок со всеми переносами строк.

Доступ к данным Blob: временной фактор важен

Данные из Blob доступны только после события FileReader.onload, поэтому будьте внимательны.

const immediateBlob = new Blob(['Сейчас или никогда'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => {
  console.log('Blob шепчет:', reader.result);
};
reader.readAsText(immediateBlob);
// Данные становятся доступны только после этого события!

Полезные материалы

1. Использование файлов из веб-приложений – Веб-API | MDN — Гид по работе с файлами в веб-приложениях.
2. Как преобразовать blob в строку в JavaScript – Stack Overflow — различные подходы к работе с Blob.
3. Blob – Веб-API | MDN — всё, что нужно знать о Blob.
4. Чтение файлов в JavaScript | Статьи | web.dev — когда с Blob нужно работать не только ради интереса.
5. File API — официальная спецификация.
6. FileReader: метод readAsText() – Веб-API | MDN — подробности об FileReader.
7. Response: метод blob() – Веб-API | MDN — как работать с Blob через Response.blob().