Как создать ссылку для скачивания

Интересно, как некоторые вещи проходят полный круг. В первые дни Интернета браузеры автоматически загружали ссылки на файлы, которые не были веб-страницей, например изображения, файлы PDF и документы. Затем браузеры стали настолько продвинутыми, что они могли открывать практически любой файл в режиме реального времени. Однако это создало проблему для разработчиков. Как заставить браузер загружать файл, а не открывать его? Для решения проблемы появилось множество уловок и обходных путей, но ни один из них не был верным решением. Все изменилось с выходом HTML5, когда Скачать атрибут был представлен.

Теперь разработчики могут добавить специальный атрибут загрузки в свои теги привязки HTML, чтобы браузеры считали ссылку загрузкой, а не открывали целевой файл. Существует несколько различных способов использования атрибута загрузки для управления обработкой браузерами ссылок для загрузки. Более того, все современные браузеры поддерживают атрибут загрузки, поэтому вы не должны видеть никаких проблем с совместимостью или необходимости отката.

Есть несколько разных способов обработки атрибута загрузки. У каждого есть свои преимущества, и все они без проблем работают в разных браузерах.

Атрибут простой загрузки

Самый простой способ использовать атрибут загрузки — просто включить его в основной форме в теги привязки. Вам не нужно указывать дополнительное имя файла или какую-либо вспомогательную информацию. Результат выглядит так:

<a href="/path/to/download.pdf" загрузить> Загрузить сейчас! </a>

Включая «скачать», вы говорите любому браузеру, читающему страницу, загрузить целевую ссылку, а не открывать ее. В этом случае браузер загрузит файл точно так же, как и с тем же именем.

Изменение имени файла

Что произойдет, если вы действительно захотите изменить имя. Есть много случаев, когда вы захотите это сделать. Автоматически сгенерированные имена файлов — хороший пример. У них обычно смехотворно длинные имена со строками мусорных символов. Это не тот опыт, который вы хотите для своих посетителей. Вы можете стандартизировать вещи с помощью атрибута загрузки.

Чтобы указать имя файла, установите равный ему атрибут загрузки. Исключите расширение файла. Браузер не может и не может преобразовать тип файла, поэтому пытаться нет смысла.

<a href="/path/to/download.pdf" download="your-file"> Загрузите сейчас! </a>

Ваши посетители загрузят файл как your-file.pdf.

Скачивание изображения

Наряду с этим есть упрощенный способ, позволяющий пользователям напрямую загружать изображения. Это не революционно, и вы, вероятно, сможете собрать все вместе сами, но вы можете использовать атрибут загрузки, чтобы создать ссылку на загружаемое изображение.

Начните с настройки изображения, как обычно на своей странице. Это, конечно же, изображение, доступное для скачивания.

<img src = "/ path / to / image.jpg" alt = "мое изображение">

Затем инкапсулируйте все это в тег привязки, ссылаясь на путь к изображению.

<a href="/path/to/image.jpg">
<img src = "/ path / to / image.jpg" alt = "мое изображение">
</a>

Наконец, добавьте атрибут загрузки в свой тег привязки. Вы можете изменить название своего изображения, если хотите.

<a href="/path/to/image.jpg" download="image-download">
<img src = "/ path / to / image.jpg" alt = "мое изображение">
</a>

Теперь, когда посетитель нажимает на изображение, он автоматически загружает его прямо с вашего сервера. В этом нет необходимости и может показаться излишним для разработчика, но сколько посетителей сайта подумают, что щелкнут правой кнопкой мыши изображение, чтобы просмотреть или загрузить его?