JavaScript Blob — двійкові дані як файл

Blob (скорочення від binary large object) — незмінний блок двійкових даних із зазначеним типом MIME. По суті — файл, якого немає на диску.

правити

Загальний опис

Це те, чим у браузері є будь-який файл: результат fetch, вибране зображення, згенерований звіт. Клас File — це просто Blob з іменем і датою.

Найчастіше Blob створюють, щоб віддати користувачу файл, згенерований на льоту: зібрав CSV із таблиці, зробив з нього Blob, отримав тимчасове посилання через URL.createObjectURL() — і клікнув по ньому <a download>. Жодного звертання до сервера.

Дані всередині — незмінні. «Змінити» блоб можна лише створивши новий.

правити

Нотатка

Кожен URL.createObjectURL() тримає дані в пам'яті, доки сторінка жива. Після завантаження обов'язково клич URL.revokeObjectURL(), інакше великі файли залишаться висіти в пам'яті.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const blob = new Blob([data], { type: "text/plain" });

властивості

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Blob	20+	13+	8+	12.1+	12+	10+

Підтримка: мобільні переглядачі

Переглядач
Blob	4.4+	yes	yes	8+

Приклади

+ запропонувати свій приклад у пісочниці

const rows = [['Ім\'я', 'Бали'], ['Іван', 42], ['Марія', 57]];
const csv = rows.map(row => row.join(',')).join('\n');

const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = 'звіт.csv';
link.click();

// не забути прибрати за собою
URL.revokeObjectURL(url);

console.log(blob.size, 'байтів,', blob.type);