How can I create download link in HTML?
I have a basic idea of HTML. I want to create the download link in my sample website, but I don’t have idea of how to create it. How do I make a link to download a file rather than visit it?
12 Answers 12
In modern browsers that support HTML5, the following is possible:
This will allow you to change the name of the file actually being downloaded.
i used same code for download PFD file and i tested in all browser all are support but in safari this code is not working safari instead of download pdf file open in new tab.
caniuse.com/#search=download%20attribute Works in Chrome, Edge, Firefox, Opera and latest Android 4.4+ browsers, and not in Internet Explorer and Safari.
This is not working for me, I have a .exe file that I want users to download. However, tried to do this myself, to verify, but this ain’t working. It will just bring me to the source code, which I don’t want viewed.
This answer is outdated. We now have the download attribute. (see also this link to MDN)
If by «the download link» you mean a link to a file to download, use
the target=_blank will make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.
Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.
You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)
why not use the download attribute, if you get a file like a jpg, it will download, instead of just opening.
@Dudeson please specify what «won’t work» and which version(s) of IE you are talking about. (It is now safe to use the approach described TIIUNDER’s much more recent answer below, though. It should get the accept mark.)
@Sergiu the answer is seven years old. I can’t delete it, and the asker hasn’t responded to my request to switch the accept mark. nothing we can do, although I’ll add a link to the more current answer
In addition (or in replacement) to the HTML5’s the browser’s download to disk behavior can also be triggered by the following http response header:
Content-Disposition: attachment; filename=ProposedFileName.txt; This was the way to do before HTML5 (and still works with browsers supporting HTML5).
Is this the full answer? You also need to send a Content Type header and read the file to force the download. May want to and that to your answer. Full answer here: stackoverflow.com/a/1465631/2757916.
this is perfect for server side implementation, just precise also the content type. it is well supported compared to the download attribute
It may be possible to force by proxying the request to a service worker who can add this header but I’m not sure.
A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:
To link to the file, do the same as any other page link:
To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:
AddType application/octet-stream EXTENSION Thanks! this is much simpler and is server-wide! 😀 I found this link that elaborates a little bit more. Thank you. htaccess-guide.com/adding-mime-types
That will make all files of that type download only. Fine if that’s what you want, but could cause fits if you forget and want another file of that type to display in-browser instead of download.
This thread is probably ancient by now, but this works in html5 for my local file.
This should open the pdf in a new windows and allow you to download it (in firefox at least). For any other file, just make it the filename. For images and music, you’d want to store them in the same directory as your site though. So it’d be like
There’s one more subtlety that can help here.
I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn’t work all the time because the browser’s compulsion to play the or display the file is still very strong.
BUT.. this is based on examining the extension on the URL’s filename!You don’t want to fiddle with the server’s extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download’s rename feature to fix the name.
I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn’t.
Атрибут download
При наличии атрибута download браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки.
Синтаксис
Обязательный атрибут
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
Открыть файл в браузере
Скачать файл
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибуты ссылок
Атрибут download позволяет скачать файл по ссылке вместо его открытия в браузере. Это иногда полезно для типовых файлов браузера — изображений, текстовых файлов, HTML-документов, PDF. В примере 1 показаны две ссылки на одно и то же изображение. При этом обычная ссылка просто открывает картинку в браузере, а вторая, с атрибутом download , выводит окно для сохранения файла на жёстком диске компьютера.
Пример 1. Использование download
Результат данного примера при щелчке по ссылке для скачивания зависит от настроек браузера (рис. 1). Если установлена галочка «Всегда выдавать запрос на сохранение файлов», то при щелчке откроется окно для указания места сохранения. Если эта галочка не стоит, то файл будет сохранён автоматически в указанную папку.
Рис. 1. Настройки браузера для сохранения файлов
Ссылка с атрибутом download по внешнему виду никак не отличается от рядовых ссылок, поэтому, чтобы как-то обозначить ссылку для скачивания, к ней можно добавить одиночный символ или текст. Для этого мы воспользуемся селектором a[download] , который будет задавать стиль всех элементов с атрибутом download . Сам вывод текста делается с помощью комбинации псевдоэлемента ::before (выводит до ссылки) или ::after (выводит после ссылки) и свойства content (пример 2).
Пример 2. Стилизация ссылок с download
Различные иконки для своих задач можно взять на сайте utf8icons.com. Достаточно найти подходящий символ, скопировать и вставить его как обычный текст в значение свойства content .
Вместо текста можно использовать и картинку в любом подходящем формате. Свойство content позволяет задать адрес изображения через функцию url() . В примере 3 показано как вставить картинку после текста ссылки.
Пример 3. Добавление картинки после текста
Результат данного примера показан на рис. 2.
Рис. 2. Иконка возле ссылки для скачивания
Бесплатно картинки в формате SVG можно взять с сайта svgrepo.com.
У этого метода есть существенный минус — картинка показывается исходного размера и её нельзя масштабировать через CSS. Чтобы обойти это ограничение, будем выводить картинку как фоновую через свойство background-image, а масштабировать её через background-size (пример 4).
Пример 4. Вывод картинки через фон
Псевдоэлементу, созданному через ::after, задаём фиксированные размеры через свойства width и height. Ширина и высота элемента не применяется к строчному элементу, которым здесь является псевдоэлемент, поэтому мы добавляем свойство display со значением inline-block . Сама картинка выводится как фон через свойство background-image, а масштабируется этот фон через background-size. Итоговый результат показан на рис. 3.
Рис. 3. Фоновая картинка идёт после ссылки для скачивания
target
Атрибут target позволяет открывать ссылку в новой вкладке браузера или в конкретном фрейме (он создаётся через ).
Открытие ссылки в новой вкладке
По умолчанию любая ссылка открывается в текущей вкладке, но если к элементу добавить атрибут target со значением _blank , то ссылка откроется в новой вкладке:
_blank (именно так, с подчёркиванием впереди) — это зарезервированное значение для открытия новой вкладки браузера. Каждая ссылка с _blank откроет свою отдельную вкладку. К примеру, если открыть 10 таких ссылок, то браузер создаст 10 вкладок и в каждую из них загрузит свою веб-страницу. Опять же, атрибут target не влияет на внешний вид ссылки, поэтому догадаться, как она будет открыта — в текущей или в новой вкладке, можно только по поведению. Чтобы различать ссылки с target и без, воспользуемся селектором a[target=_blank] , который задаёт стиль ссылок с атрибутом target и значением _blank .
Давайте для разнообразия выведем картинку перед ссылкой через библиотеку иконок Font Awesome.
Сперва подключаем стилевой файл со всеми иконками библиотеки через .
Выбираем на сайте fontawesome.com/icons/ подходящую бесплатную иконку для наших задач и щёлкаем по ней. В открывшейся панели нас интересует код иконки, он показывается рядом со словом Unicode (рис. 4).
Рис. 4. Код иконки Font Awesome
Копируем код и вставляем его как значение свойства content.
Заметьте, что перед кодом иконки ставится косая черта, она показывает что это не просто такой текст, а символ Юникода. Полный код приведён в примере 5.
Пример 5. Стилизация ссылки с target через Font Awesome
Для разнообразия добавляем картинку не после, как это делали раньше, а перед ссылкой через псевдоэлемент ::before (рис. 5).
Рис. 5. Фоновая картинка перед ссылкой в новой вкладке
Открытие ссылки во фрейме
Вместо значения _blank можно указать имя фрейма, заданного атрибутом name элемента . Такие ссылки будут открываться в указанном фрейме, а не в текущей вкладке (пример 6).
Пример 6. Открытие ссылки во фрейме
Чебурашка
Крокодил Гена
Шапокляк
Если совершить ошибку и указать несуществующее имя фрейма, то браузер откроет ссылку в новой вкладке. Однако эта вкладка будет именованной и все ссылки с одним значением target будут открываться уже в ней. В примере 7 в качестве значения target используется blank (без подчёркивания, заметьте). Поскольку фрейма с таким именем в коде нет, то все ссылки будут открываться в одной и той же новой вкладке.
Пример 7. Открытие ссылки в именованной вкладки
hreflang
Атрибут hreflang содержит код языка того сайта, на который ведёт ссылка. К примеру, вот как будет выглядеть HTML с указанием языка (пример 8).
Пример 8. Использование атрибута hreflang
В качестве значения hreflang обычно пишется двухбуквенный код языка. В частности, для русского — ru; для английского — en; для французского —fr. Если требуется уточнить страну языка, то она добавляется через дефис. К примеру, для немецкого языка пишем de, но австрийский вариант немецкого уже пишем как de-AT.
Сам hreflang не оказывает влияния на внешний вид ссылок и предназначен в первую очередь для поисковых систем. Однако, используя этот атрибут, мы можем добавить к ссылкам иконку или текст, опять же, через селектор атрибута (пример 9).
Пример 9. Стилизация ссылок с hreflang
Здесь к каждой ссылке с соответствующим значением атрибута hreflang добавляется текст с обозначением языка. Результат данного примера показан на рис. 6.
Атрибуты download , target , hreflang должны добавляться только при наличии атрибута href .
Итоги
- Мы рассмотрели следующие атрибуты элемента :
- download — позволяет скачать файл по ссылке, а не открывать его в браузере;
- target — используется для открытия ссылок в новой вкладке или в окне фрейма;
- hreflang — указывает язык сайта или веб-страницы по ссылке;