JavaScript fetch: скачать файл через Blob и сохранить локально

Когда API возвращает файл через fetch, ответ можно преобразовать в Blob и запустить скачивание временной ссылкой. Такой подход подходит для небольших и средних файлов, если сервер разрешает запрос и браузер получает корректные заголовки.

Рабочий пример

async function downloadFile(url, filename) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const blob = await response.blob();
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  setTimeout(() => URL.revokeObjectURL(link.href), 1000);
}

Проверка response.ok не позволяет сохранить HTML-страницу ошибки под именем файла. Временный object URL следует освободить после запуска загрузки.

Частый вопрос

Почему файл открывается вместо скачивания?

Проверьте атрибут download, имя файла и CORS. Для cross-origin URL браузер может игнорировать download; в таком случае настройте Content-Disposition на сервере.