Установка оригинального имени для загруженного файла

Быстрый ответ

Для того чтобы задать имя файла при его скачивании, используйте HTTP-заголовок Content-Disposition со значением attachment; filename="имя.расширение".

Вот как это выглядит в HTML коде:

<a href="адрес/файла" download="название.расширение">Скачать</a>

Если необходимость контроля процесса на сервере, например, с помощью PHP:

<?php header('Content-Disposition: attachment; filename="название.расширение"'); ?>

Атрибут download в HTML позволяет присваивать имя файлу на клиентской стороне, но для обеспечения корректной работы в различных браузерах рекомендуется использование серверного заголовка.

download и Content-Disposition предоставляют возможность указать предпочитаемое имя файла для улучшения пользовательского взаимодействия.

Присвоение имени объекту Blob через JavaScript

JavaScript предоставляет возможности управления загрузками и именованиями файлов. Создайте Blob-объект, вызовите метод URL.createObjectURL() и задайте необходимое имя:

const data = new Blob([content], {type: 'text/plain'});
const url = window.URL.createObjectURL(data);

const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.download = 'название.txt';

document.body.appendChild(link);
link.click();

setTimeout(() => {
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}, 0);

Визуализация процесса

Присвоение имени файлу при скачивании можно представить себе в виде следующей аналогии:

Когда вы кликаете на ссылку:
Вы -> [Клик → Выбрана ссылка 🔗]

Что происходит "за кулисами":
Браузер -> [Установка HTTP-заголовка: "Безымянный файл!"]

С использованием заголовка 'Content-Disposition':
Браузер -> [HTTP-заголовок присваивает имя: "**желаемое_имя_файла**"]

Результат:
Файл 📁: **желаемое_имя_файла**

Заголовок "Content-Disposition" выполняет функцию управляющего процессом скачивания файла, как если бы он был Дамблдором из Хогвартса.

Выбор подхода: серверный или клиентский

Какой из подходов выбирать, серверный или клиентский, зависит от конкретной ситуации:

Серверный подход:

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

Подробнее об этом расскажет наш спикер на видео

Клиентский подход:

• Отлично подходит для динамически генерируемого контента.
• Экономит ресурсы сервера.
• Хороший вариант для приложений, которые работают в режиме офлайн.

Роль MIME-типов

Правильно настроенные MIME-типы в HTTP-заголовках позволяют браузеру успешно интерпретировать файлы. Если MIME-тип установлен неверно, файл может вскрыться в браузере, а не начать загрузку. Чтобы гарантировать скачивание, используйте совместно Content-Disposition и MIME-тип application/octet-stream.

Вот как нужно это сделать на PHP:

<?php
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="пример.расширение"');
?>

А в JavaScript корректно указывайте MIME-тип при создании объекта Blob:

const data = new Blob([content], {type: 'mime/тип'});

Поддержание чистоты в DOM

После завершения скачивания важно подчистить DOM, удалив временные элементы. Это сродни вежливости в работе с веб-окружением:

setTimeout(() => {
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}, 0);

Полезные материалы

1. <a> – элемент-основа HTML разметки | MDN — подробно об использовании атрибута download в HTML.
2. HTML a download атрибут — интерактивный урок по работе с атрибутом download.
3. HTML стандарт — официальное руководство по использованию элемента <a>.
4. Оптимизация вашего веб-сайта с помощью HTTP KB | BetterExplained — роль HTTP заголовков в процессе скачивания.
5. Content-Disposition – HTTP шапка | MDN — обстоятельное руководство по использованию заголовка Content-Disposition.
6. Браузер – как корректно закодировать имя файла в заголовке Content-Disposition в HTTP? – Stack Overflow — способы кодирования имен файлов в HTTP заголовках.