Атрибут download в HTML


Атрибут download HTML5

HTML5 пришел с новыми API, новыми типами ввода и атрибутами для форм. Часто бывает, что крупные дополнения могут заслонять незначительные улучшения, и я думаю, что это особенно верно в случае с атрибутом download.
Как вы знаете, есть некоторые файлы, которые браузер не загружает автоматически: изображения, другие веб-страницы и, в зависимости от настроек в вашем браузере, даже PDF-файлы.
Атрибут download дает браузеру нативный путь автоматической загрузки файлов без необходимости подгрузки JavaScript. Это действительно полезно для любого приложения, которое имеет дело с загрузкой изображений.

Aтрибут download в действии

Так как атрибут download не использует никаких скриптов, это так же просто, как добавить атрибут к вашей ссылке:

Что здорово в этом атрибуте – это то, что вы можете присвоить имя загружаемому файлу, даже если его нет на вашем сервере. Это отлично подходит для сайтов со сложными именами файлов или для динамично создаваемых изображений, которые хотят предоставить простое и удобное для пользователя имя файла. Для того, чтобы указать имя, вы просто добавляете знак равенства, за которым следует имя, которое вы хотите использовать в кавычках. Вот так:

Обратите внимание, что браузер автоматически добавит правильное расширение для загруженного файла, так что вам не придется это делать.

Поддержка браузера

В настоящее время только Chrome 14+ и Firefox 20+ поддерживают атрибут download, так что вам, возможно, придется использовать JavaScript, чтобы увидеть, что атрибут поддерживается. Вы можете сделать это следующим образом:

Заключение

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

Перевод статьи How to use the download attribute

Автор оригинального текста Sara Vieira

Атрибут HTML5 download

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

Вставьте атрибут download в ссылку. Теперь вместо открытия ссылки в текущем окне появится диалоговое окно с возможностью выбора: сохранить файл на ваш компьютер или открыть. Обратите внимание, что в нашем примере для атрибута download установлено значение expenses.pdf . expenses.pdf (это пример, вы можете поставить свое) это то имя, под которым файл будет сохранен на стороне пользователя.

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

Как вы можете видеть на приведенном выше изображении браузеры IE и safari, включая последние версии, не поддерживают данный атрибут.

Атрибут download в HTML

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

Как правило, когда мы кликаем на ссылку указывающую на HTML-документ, PDF-файл, файл изображения или другие медиа-файлы, то они просто открываются в браузере. Но если гиперссылка имеет атрибут download, как в приведенном выше примере, то браузер, вместо открытия файла, предложит его сохранить, т.е. также как при указании ссылки на zip или exe файл.

Илон Маск рекомендует:  Что такое код atexit

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

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

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

В приведенном выше примере, когда пользователь кликает по гиперссылке, то PDF-файл под названием «tform5201.pdf» сохраняется под более читабельный и удобный именем «visa-application.pdf».

Определение поддержки атрибута браузером

Так как некоторые браузеры до сих пор не реализовали поддержку атрибута download, то при использовании данного атрибута имеет смысл проверять, имеется ли его поддержка в браузере пользователя:

// Создаем временную гиперссылку
var hyperlink = document. createElement ( «a» ) ;

// Если свойство download не определено
// значит браузер не поддерживает этот атрибут
if ( hyperlink. download === undefined ) <
// do stuff
>

Поддержка браузерами.

На текущий момент (2014 г.), атрибут download поддерживают последние версии следующих веб-браузеров:

  • Firefox / Firefox для Android
  • Chrome / Chrome для Android
  • Opera / Opera Mobile
  • Android Browser
  • Blackberry Browser

Проверьте эту таблицу поддержки атрибута download на caniuse.com, чтобы увидеть текущее положение дел с поддержкой браузерами. Кроме того, можете ознакомиться со спецификацией атрибута download консорциума W3C.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Атрибут download в HTML

Всем привет!
Сегодня я вам расскажу, как при помощи атрибута « download » в HTML5 можно сделать быструю ссылку для скачивания. Вот, например, чтобы скачать « .zip » или « .rar », достаточно указать ссылку на файл, а вот если вы укажете в ссылке на изображения, на другие веб страницы или PDF-ки, тогда файлы просто откроются.
Если вы решите создать сайт-хранилище для загрузки и скачки файлов, то атрибут « download » будет для вас отличным помощником.

Давайте теперь к делу. Сейчас я вам покажу, как нужно правильно использовать атрибут « download » и как он действует.

Например, если указать ссылку на картинку:

1. Пример

то в результате откроется картинка, но если прописать к ссылке атрибут « download »:


то в результате нам будет предложено сохранить картинку на компьютер.

2. Пример

Если указать в ссылке веб-страницу:

то в результате откроется просто веб-страница, но если прописать атрибут « download »:

то в результате нам будет предложено сохранить веб-страницу на компьютер.

3. Пример

Если указать в ссылке на PDF:

то в результате откроется просто PDF-ка, но если прописать атрибут « download »:

то в результате нам будет предложено сохранить PDF-ку на компьютер.

Вот и все чудеса, которые творит атрибут « download » в HTML5.
Если у вас есть дополнение, пишите, мне будет интересно почитать.

Подписывайтесь на обновления моего блога. Удачи!

Атрибут download в HTML5

Когда Вы ставите на своих страницах ссылки на различные изображения, PDF-файлы и даже иногда потоковое видео, то вместо скачивания, оно автоматически начинает выводиться в браузере. В HTML5 появился атрибут download, который позволяет именно скачать файл, а не открыть его в браузере.

Пример использования атрибута download в HTML5:

Теперь при переходе по ссылке файл начнёт скачиваться. Так же можно задать и имя, которое появится при сохранении файла. Чтобы это сделать, надо у атрибута download поставить значение:

Вот так всё просто это делается, однако, как я уже говорил в предыдущих статьях, HTML5 на данный момент ещё не является особо рабочим. И до полной поддержки современными браузерами ещё далеко. В частности, атрибут download поддерживается лишь свежими версиями Firefox и Chrome.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Илон Маск рекомендует:  Как показать первый кадр avi файла

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 8 ):

    А ведь есть аналог на JavaScript?

    HTML5? Михаил мини видеокурс по HTML5 в вашем исполнении будет?

    Возникает логический вопрос зачем его вообще тогда учить если он не работает? Всё равно спасибо Михаил ваш сайт очень полезный

    Полностью с Вами солидарен. Применять его будут ой как не скоро. Т.к. большинство браузеров его не поддерживают на данный момент. Когда IE10, к примеру, будет по значимости такой же, как сейчас IE6, тогда HTML 5 и будут использовать, но лучше его начать учить уже сейчас. Чтобы в будущем быть во все оружия! :)

    Михаил, советую добавить на сайт кнопочку «Заметили не точность?» ну или еще какой способ по сообщению вам об ошибках/опечатках в статьях. P.S. в данной статье в последнем абзаце пропущено слово «момент»

    Михаил напишите статью про переходы по страницам на ajax. Ведь это увеличивает скорость загрузки страниц.

    Как сделать ссылку на скачивание файла

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

    Как сделать скачивание файла с сайта.

    Не редкость когда нужно бывает создать ссылку для скачивания какого то файла. При этом желательно чтобы это была прямая ссылка для скачивания, а не на внешний сайт (облако, хранилище).

    Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, Excel, архивы и мн. другие.

    Как на сайте сделать скачивание файла


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

    Делается это при помощи ссылки на файл с использованием специального HTML тега. Про то как создавать обычные ссылки есть статья: как сделать ссылку

    Ниже пойдёт речь о том как сделать ссылку для скачивания файла.

    Скачивание архивов

    Для файлов-архивов (форматы zip, rar и т.д.) достаточно просто указать ссылку на файл который нужно передать для скачивания. Поэтому здесь применяется обычный HTML тег ссылки:

    # — вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;

    текст ссылки — можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т.д.

    Так же хочу обратить внимание, что если файл с вашего сайта указываем относительный путь к файлу /music/pesnya.mp3 , а со сторонних сайтов указываем полный путь https://inter-net.pro/music/pesnya.mp3

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

    HTML атрибут download

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

    Структура ссылки для скачивания в html строится следующим образом:

    Вместо знака решётки # указываем ссылку на файл передающийся для скачивания.

    В атрибуте download ничего указывать не нужно. Браузер поймёт что файл нужно скачивать, а не открывать.

    Со всплывающей подсказкой:

    В кавычках атрибута title прописываем текст всплывающей подсказки.

    *Обязательно не забываем переключить редактор в режим HTML чтобы редактировать теги

    Текстовая ссылка

    Код:

    Результат: скачать файл

    Скачать через кнопку

    Код:

    Результат:

    Есть такой инструмент как Генератор кнопок, где просто генерировать кнопки с тегом скачивания и иконками.

    Илон Маск рекомендует:  Синтаксис HTML

    Кнопка с иконкой

    Так же можно добавить к тексту ссылки иконочный шрифт, если он установлен у вас на сайте. При этом шрифтовую иконку можно поставить перед или после текста ссылки.

    Код вставки иконки

    Код:

    Результат:

    Скачивание файла при клике на изображение

    Код:

    Результат:

    Со стилями CSS

    Так же можно применять все свойства CSS и изменять размер шрифта, название, цвет и т.д.

    Для этого добавляем атрибут style=» «

    Код:

    Результат:

    Если вам что то не понятно или есть какие либо вопросы — не стесняйтесь и задавайте их в комментариях.

    Полезный атрибут download для ссылок на HTML5


    2015-04-25 / Вр:11:27 / просмотров: 8226

    Если ваш сайт является хранилищем для скачиваний и закачиваний файлов, эта статья будет для вас находкой.

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

    то в результате откроется изображение картинки.

    Если к ссылке просто добавить атрибут «download» , то браузер предложит скачать картинку:

    Вот такое умеет делать чудо атрибут для ссылок «download» .

    Попробуйте еще поэкспериментировать с файлами «html» и «pdf»

    HTML Атрибут download

    Атрибут download (от англ. «download» ‒ «скачать, загрузить») указывает на необходимость загрузки указанного ресурса с последующим сохранением на устройство пользователя.

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

    Примечание: Download используется только если для элемента установлен атрибут href .

    Синтаксис

    Значения

    Если атрибут download указан без значения, то файл скачивается и сохраняется под своим исходным именем, как написано на сервере. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя. При этом файл будет скачан и сохранён с именем, указанным в значении download . Расширение файла при этом останется исходным.

    Значение по умолчанию

    По умолчанию этот атрибут выключен.

    Применяется к тегам

    Различия между HTML 4.01 и HTML5

    Атрибут является новым в HTML 5.

    Примеры использования:

    Атрибут download (Элемент )

    Скачать файл при нажатии на ссылку (вместо навигации к файлу):

    Атрибут download (Элемент )

    Изображение-карта с интерактивными областями, при клике по кторым можно загрузить соответствующий контент:

    HTML | скачать атрибут

    Атрибут загрузки HTML используется для загрузки элемента, когда пользователь нажимает гиперссылку. Он используется только когда установлен атрибут href. Загруженное имя файла будет значением атрибута. Значением атрибута будет имя загруженного файла. Если это значение удалено, используется оригинальное имя файла.

    Использование: Используется в элементах и .

    Синтаксис:

    Пример ниже иллюстрирует использование атрибута загрузки в элементе привязки.
    нелогич-:

    Как создать ссылку на скачивание файла в HTML?

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

    Предположим, что ваш сайт посвящен обоям для рабочего стола компьютера. Понятное дело, что на странице изображение размером 1900×1900 пикселей вы не будете размещать в полном объеме, а разместите уменьшенную его копию с возможностью скачать полную версию изображения.

    Как это делаю большинство сайтов?

    Неплохо, но при нажатии на такую ссылку мы получаем:

    1. Покинутую страницу сайта;

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

    Как быть в таком случаем и исправить положение?

    Все довольно просто. Вам необходимо добавить атрибут «download» к ссылкам, чтобы получилось:

    В таком случае при нажатии на ссылку пользователю сразу будет предложено сохранить документ.

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL