Как браузер обрабатывает скачивание файлов (download через ссылку)?

Скачивание файлов через ссылки — это фундаментальная возможность веба, позволяющая пользователям сохранять контент на свои устройства. Механизм запускается, когда пользователь взаимодействует с HTML-элементом <a> (якорь), у которого установлен атрибут download.

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

Процесс можно разделить на несколько этапов:

• Инициация запроса: Клик по ссылке с download заставляет браузер выполнить HTTP GET-запрос на указанный в атрибуте href URL.
• Обработка ответа сервера: Ключевую роль играет HTTP-заголовок Content-Disposition. Если сервер отправляет Content-Disposition: attachment; filename="example.pdf", браузер понимает, что тело ответа — это файл, который нужно сохранить, а не отобразить в текущей вкладке.
• Сохранение файла: Браузер получает поток данных (бинарных или текстовых) и, следуя политикам безопасности, предлагает пользователю выбрать место для сохранения через системное диалоговое окно.

Практический пример

Рассмотрим простой HTML-код для создания ссылки скачивания:

<!-- Ссылка на статический файл на том же сервере -->
<a href="/files/report.pdf" download="my_report.pdf">
  Скачать отчёт (PDF)
</a>

<!-- Ссылка, которая инициирует скачивание через серверный скрипт -->
<a href="/api/download?id=123" download>Скачать документ</a>

Во втором примере серверный обработчик (например, на Node.js с Express) должен установить правильные заголовки:

// Пример на Node.js/Express
app.get('/api/download', (req, res) => {
  const filePath = path.resolve(__dirname, 'private', 'file123.zip');
  // Устанавливаем заголовок, указывающий на скачивание
  res.setHeader('Content-Disposition', 'attachment; filename="archive.zip"');
  res.sendFile(filePath); // Отправляем файл
});

Особенности и ограничения

Атрибут download имеет ограничения из соображений безопасности. Он не сработает, если файл находится на другом домене (cross-origin), и сервер этого домена не отправляет соответствующие заголовки CORS. В таких случаях браузер просто перейдёт по ссылке, а не предложит скачать файл. Для скачивания данных, сгенерированных на клиенте (например, содержимого текстового редактора), можно использовать JavaScript API URL.createObjectURL() вместе с объектами Blob.

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