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:
You also can use this:
This will allow you to change the name of the file actually being downloaded.
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.)
In addition (or in replacement) to the HTML5’s <a download attribute already mentioned,
the browser’s download to disk behavior can also be triggered by the following http response header:
This was the way to do before HTML5 (and still works with browsers supporting HTML5).
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:
This thread is probably ancient by now, but this works in html5 for my local file.
<p><a href=»file:///. example.pdf» download target=»_blank»>test pdf</a></p>
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 для HTML-тега ссылки. Примеры ссылок для скачивания.
Как сделать скачивание файла с сайта.
Не редкость когда нужно бывает создать ссылку для скачивания какого то файла. При этом желательно чтобы это была прямая ссылка для скачивания, а не на внешний сайт (облако, хранилище).
Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, Excel, архивы и мн. другие.
Как на сайте сделать скачивание файла
Возможно вы хотите поделиться с посетителями вашего сайта каким либо файлом, при этом файл может быть самого любого формата.
Делается это при помощи ссылки на файл с использованием специального HTML тега.
Скачивание архивов
Для файлов-архивов (форматы zip, rar и т.д.) достаточно просто указать ссылку на файл который нужно передать для скачивания. Поэтому здесь применяется обычный HTML тег ссылки:
- # — вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;
- текст ссылки — можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т.д.
Так же хочу обратить внимание, что если файл с вашего сайта указываем относительный путь к файлу /music/pesnya.mp3 , а со сторонних сайтов указываем полный путь https://v3c.ru/music/pesnya.mp3
А вот для файлов не архивных форматов (музыка, видео, различные текстовые файлы и документы, изображения и т.д.) применяется специальный для этого атрибут прописываемый в теге <a . ></a> .
HTML атрибут download
Для того, чтобы передать какой либо файл для скачивания пользователю, в HTML ссылки нужно прописать атрибут download .
Структура ссылки для скачивания в html строится следующим образом:
- Вместо знака решётки # указываем ссылку на файл передающийся для скачивания.
- В атрибуте download ничего указывать не нужно. Браузер поймёт что файл нужно скачивать, а не открывать.
Со всплывающей подсказкой:
- В кавычках атрибута title прописываем текст всплывающей подсказки.
*Обязательно не забываем переключить редактор в режим HTML чтобы редактировать теги
Текстовая ссылка
Результат: скачать файл
Скачать через кнопку
Кнопка с иконкой
Так же можно добавить к тексту ссылки иконочный шрифт, если он установлен у вас на сайте. При этом шрифтовую иконку можно поставить перед или после текста ссылки.
Код вставки иконки
<i ></i> — пример для Font Awesome
Результат:
Скачивание файла при клике на изображение
Со стилями CSS
Так же можно применять все свойства CSS и изменять размер шрифта, название, цвет и т.д.
Для этого добавляем атрибут style=» «
Инструкция как делать ссылки: анкорные и безанкорные ссылки, ссылки в BB-кодах, ссылки открывающиеся в новой вкладке, ссылки на изображениях и т.д.
Данный инструмент позволяет на лету без перезагрузки страницы экранировать код для дальнейшей вставки его в HTML, заменяя в коде символы требующие обязательного экранирования для таких случаев. Это символы: < > & "
очень понятная и наглядная статье для таких далеких, есть вопрос, как рядом поставить счетчик количества скачиваний
Счётчик количества скачиваний так просто одним HTML нельзя поставить. Тут уже нужно базу данных подключать и сервер. Это простейшая задача, но нужно понимать что делаешь.
понятно. файли лежат на облаке у меня. ну раз это проблема то плохо
ещё один вопрос ели можно, как сделать чтобы строчки ссылка отображались не одна за одной сверху вниз, в редакторе вроде код следующей ссылки под предыдущим на на яву один-за другим
Не понял ничего. Буквы знакомые, слова распознаваемые, а в куче текст — непонятная абракадабра.
Перефразируйте осмысленно — подскажу решение.
Если у облака есть счётчик, то возможно есть API, позволяющее отображать количество скачиваний.
я тоже об этом подумал. ну да ладно, не суть. а от с отображением ссылок не пойму, да и вообще хочу сделать так; (Название файла любое(не ссылка))-(Скачать файл(ссылка-)) или место ссылки Скачать файл Иконку, как вы описывали выше и что бы один под другим шло розмещение
В HTML тег <p> означает параграф. Это парный тег где есть открывающий и закрывающий теги.
Вот так ссылки с новой строки:
а как сделать чтобы эта кнопка была ниже текста какой код нужен? то есть я текст написал но мне нада чтобы эта кнопка скачивания была в низу
Большое спасибо за эту замечательную статью! Ясно и понятно теперь, как делать разного рода ссылки для скачивания файлов.
Подскажите, пожалуйста, как можно сделать скачивание файлов, после введения посетителем сайта определённого кода? При этом, это должен быть не один код, а несколько.
Объясню, для чего.
Человек покупает мой продукт. После этого получает цифровой код, к примеру такой: kr05jY369fK Другой человек покупает продукт и получает другой код и т. д..
Вот, нужно, чтобы каждый из покупателей, введя свой уникальный код, мог скачать файл.
Как это организовать?
Друзья, подскажите! В облачном хранилище лежит PDF файл. На него имеется прямая ссылка. Ссылка закодирована в QR код. Задача! Считать ссылку QR сканером телефона и PDF картинка должна открыться в любом имеющемся браузере телефона на весь экран, без каких либо дальнейших действий со стороны сканирующего. Что бы никаких вопросов типа закачать или открыть. Кто подскажет как?
Как сделать скачивание файла с сайта html
There are so many downloads from the websites daily, we can’t even count it’s beyond imagination. But as a programmer, you should know about creating a download link for yourself too so that when you need to add it to your website, it will be easy for you to add this feature. In this article, we will learn how to create a download link with html.
Download Link is a link that will download the specific file when the user clicks on it. Now, let’s talk about the attribute which will be used in the code while writing it. The “download” attribute is used to make the link downloadable. It will specify the target (pdf, zip, jpg, doc, etc) that will be downloaded only when the user clicks on the link.
Note: The download attribute can be only used when the href attribute is set before.
Syntax:
Example: This example describes how to create a downloadable link.
HTML <a> download Attribute
Download file when clicking on the link (instead of navigating to the file):
More «Try it Yourself» examples below.
Definition and Usage
The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
The optional value of the download attribute will be the new name of the file after it is downloaded. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
If the value is omitted, the original filename is used.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.