Задание предлагаемого имени файла при использовании data: URI

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

HTML
Скопировать код
<a href="data:text/plain;charset=utf-8,Hello%20World" download="hello.txt">Скачать</a>

Атрибут download в элементе <a> позволяет задать предложенное имя файла при загрузке из data URI.

С целью предоставить пользователю выбрать имя файла при скачивании из data URI, используйте атрибут download. Этот атрибут есть в HTML5 и пишется внутри тега <a>. Современные браузеры поддерживают эту функцию, включая Chrome, Firefox, Edge, Opera и Safari 10+.

Для старых браузеров, например, IE11 и более ранних версий Edge и Safari которые не принимают атрибут download, можно использовать JavaScript для создания ссылки с нужным data URI и инициации события клика.

Убедитесь, что вы правильно указали mime-тип в data URI, чтобы браузер мог корректно интерпретировать и обработать данные. Не забывайте про очистку ресурсов после работы, особенно при динамическом добавлении элементов через JavaScript.

Подготовьте альтернативный способ загрузки для случаев, когда браузер не поддерживает атрибут download.

Кинга Идем в IT: пошаговый план для смены профессии

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

Атрибут download к элементу <a> позволит указать имя скачиваемого файла:

HTML
Скопировать код
<a href="data:text/plain;charset=utf-8,Hello%20Java" download="no_coffee.Java">Пойдёт без кофе?!? ☕</a>

Этот метод отлично работает в Chrome, Firefox, Edge, Opera, а также в Safari для рабочего стола начиная с версии 10+ и iOS Safari с версии 13 и выше. Основное упоминание: он не будет действовать в IE11 и устаревших версиях Edge и Safari.

Атрибут download дает возможность задания имени для скачиваемых файлов без необходимости использовать JavaScript. Он эффективно работает с URI, которые начинаются с data:.

Применение JavaScript для браузеров без поддержки download

Если браузер не поддерживает атрибут download, можно прокодировать событие клика на элемент <a> с использованием JavaScript:

JS
Скопировать код
function downloadDataURI(uri, filename) {
  var link = document.createElement("a");
  link.download = filename;
  link.href = uri;
  
  // Этот метод запустит загрузку! Но об этом никто не должен знать — моя бабушка думает, что я работаю 👼
  document.body.appendChild(link); 
  link.click(); 
  document.body.removeChild(link); // Не забываем очищать за собой!
}

// Пример использования функции:
downloadDataURI("data:text/plain;charset=utf-8,Hello%20World", "hello.txt");

Визуализация

Представьте себе, что вы строите невидимый мост 🕳️ между данными и устройством пользователя.

Файл передается по этому мосту через такую ссылку:

HTML
Скопировать код
<a href="data:text/plain;charset=utf-8,Hello%2C%20World!" download="Greeting.txt">Послать файл "Greeting.txt"</a>

Пользователь делает клик, и файл "Greeting.txt" моментально появляется на его устройстве! 🛰️💻

```markdown Состояние моста 🕳️: [🚫📄, ⏳👀] // До клика: Файла нет, только ожидание. Состояние моста после клика: [📄, 🛰️✅] // После клика: Файл доставлен, пользователь доволен!

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

  1. Data URLs – HTTP | MDN – Всё, что вы хотели знать о Data URLs.
  2. <a>: The Hyperlink Element – HTML: HyperText Markup Language | MDN – Глубокий разбор использования атрибута download.
  3. HTML Standard – Описание атрибута download для ссылок по стандарту WHATWG.
  4. Content-Disposition – HTTP | MDN – Объяснение использования HTTP заголовка Content-Disposition для контроля загружаемых файлов.
  5. Base64 Decode and Encode – Online – Подробное описание кодирования данных в Base64, которое полезно при работе с Data URI.
  6. RFC 2397 – The "data" URL scheme – Официальная спецификация IETF по схеме URI Data.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой атрибут в элементе <a> позволяет задать имя файла при загрузке из data URI?
1 / 5