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

Любые известные браузеру типы документов, такие как 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.

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