Как сделать ссылку для скачивания?

Любые известные браузеру типы документов, такие как HTML, изображение, PDF-файл и др., по ссылке открываются непосредственно в браузере. Чтобы браузер вместо открытия скачивал файл, к элементу <a> следует добавить атрибут download, как показано в примере 1.

Пример 1. Ссылка для скачивания

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скачивание файла</title>
</head>
<body>
<p><a href="image/xxx.jpg">Обычная ссылка на картинку</a></p>
<p><a href="image/xxx.jpg" download>Эта же картинка для скачивания</a></p>
</body>
</html>

Эти две ссылки по своему виду никак не отличаются друг от друга, поэтому с помощью стилей можно выделить ссылки для скачивания, добавив к ним картинку. Для этого используем селектор a[download] и тем самым выбираем элементы <a>, у которых присутствует атрибут download. Затем добавляем к селектору псевдоэлемент ::after со свойством content, значением которого выступает адрес изображения (пример 2). Остальные свойства нужны для сдвига картинки относительно текста ссылки.

Пример 2. Картинка у ссылок для скачивания

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скачивание файла</title>
<style>
a[download]::after {
content: url(/example/image/download.png); /* Выводим картинку */
vertical-align: sub; /* Выравнивание по вертикали */
padding-left: 5px; /* Расстояние от текста до картинки */
}
</style>
</head>
<body>
<p><a href="image/xxx.jpg">Обычная ссылка на картинку</a></p>
<p><a href="image/xxx.jpg" download>Эта же картинка для скачивания</a></p>
</body>
</html>

Читайте также »   Как выделить цветом строку таблицы при наведении?

Результат данного примера показан на рис. 1.

Как сделать ссылку для скачивания?

Рис. 1. Ссылка для скачивания

Источник

You might also like

Comments are closed.