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

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

<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.

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

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

<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:

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");

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

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

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

<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.