Установка имени файла Blob в JavaScript

Одной из распространенных проблем, с которыми сталкиваются начинающие разработчики, является необходимость установить имя файла blob в JavaScript при принудительной загрузке. Рассмотрим типичный пример.

function newFile(data) {
   var json = JSON.stringify(data);
   var blob = new Blob([json], {type: "octet/stream"});
   var url  = window.URL.createObjectURL(blob);
   window.location.assign(url);
}

Выполнение этого кода приводит к тому, что файл загружается мгновенно, без обновления страницы. Однако имя файла выглядит как случайный набор символов, что может быть не очень удобно для пользователя.

Так как же можно установить имя файла как my-download.json?

Создание объекта URL с помощью URL.createObjectURL()

Функция URL.createObjectURL() используется для создания объекта URL, представляющего blob. Этот blob может быть использован как URL для скачивания содержимого blob.

Объект URL, созданный с помощью URL.createObjectURL(), имеет вид blob:<origin>/<uuid>, где <origin> — это происхождение blob, а <uuid> — это уникальный идентификатор, генерируемый браузером.

Из-за спецификации URL.createObjectURL(), нет прямого способа для задания имени файла при скачивании blob через window.location.

Использование объекта a и download атрибута

Для решения этой проблемы можно использовать объект a и download атрибут. download атрибут в элементе a указывает, что целевой ресурс должен быть загружен при клике. Значение атрибута будет использовано как имя файла.

Вот пример:

function newFile(data) {
   var json = JSON.stringify(data);
   var blob = new Blob([json], {type: "octet/stream"});
   var url  = window.URL.createObjectURL(blob);
   var a = document.createElement('a');
   a.href = url;
   a.download = 'my-download.json';
   a.click();
}

В этом коде создается элемент a, устанавливается его href как URL blob, download атрибут устанавливается как имя файла, и вызывается метод click(). При таком подходе файл будет скачан с установленным именем my-download.json.