Blob URL: создать ссылку и освободить её вовремя

Назначение

Объектный URL позволяет использовать Blob как ресурс внутри браузера без загрузки файла на сервер. У такой ссылки есть жизненный цикл: её нужно освободить, когда ресурс больше не нужен интерфейсу.

Как это работает

В своём учебном документе код создаёт небольшой текстовый файл и видимую ссылку. Пользователь сам запускает скачивание. Функция очистки удаляет ссылку и отзывает объектный URL после завершения работы с ним.

Пример

const blob = new Blob(["Учебная заметка"], {type:"text/plain;charset=utf-8"});
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "lesson.txt";
link.textContent = "Скачать учебную заметку";
document.body.append(link);
function disposeDownload() {
  link.remove();
  URL.revokeObjectURL(url);
}

Что должно получиться

На странице появляется ссылка на созданный в памяти текст. Серверное хранилище не используется. После отзыва адрес не следует продолжать предлагать пользователю как действующий ресурс.

Граница применения и частая ошибка

Не отзывайте URL сразу после назначения href, пока он ещё нужен для действия. Но и не накапливайте новые объектные URL при каждом обновлении без очистки. Такой адрес не предназначен для постоянной публичной ссылки или сохранения между независимыми посещениями.

Самостоятельная проверка

Скачайте заметку в своём проекте и проверьте содержимое. После завершения вызовите disposeDownload. При замене файла новым отзовите прежний URL только тогда, когда интерфейс перестал его использовать.

Связанные материалы

• Кодировка UTF-8
• Освобождение ресурсов
• Консоль