Как скачать файл html

Синтаксис атрибута

Значения атрибута

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

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

Значение атрибута download будет новым именем скачиваемого файла («logo.jpg» вместо «myimage.jpg»):

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

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

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

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

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

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

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

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

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

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

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

Создание кнопки для скачивания документа

Подскажите скрипт, чтобы при клике на кнопку предлагалось скачивание файла (при подтверждении скачивался файл) ? вот пример кнопки:

И вот, например, название файла: kolbasa-primer.xlsx
Отслеживать
задан 5 мая 2016 в 8:25
571 3 3 золотых знака 11 11 серебряных знаков 28 28 бронзовых знаков
Обязательно использовать button?
5 мая 2016 в 8:37

ну желательно, просто уже стили заточены под нее, но если все можно сделать гораздо проще ссылкой, тогда можно и ссылкой

5 мая 2016 в 8:39
5 мая 2016 в 8:45

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

5 мая 2016 в 8:53

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Самый просто способ — использовать прямую ссылку на файл:

Кроме того, используя HTML5, можно указать аттрибут download:

И, наконец, пример скрипта для скачивания файла:

$file = ''; header("Cache-Control: public"); header("Content-Description: File Transfer"); header("Content-Disposition: attachment; filename=$file"); header("Content-Type: application/zip"); header("Content-Transfer-Encoding: binary"); readfile($file); 

Отслеживать
ответ дан 5 мая 2016 в 11:21
Andrei Katalkin Andrei Katalkin
739 3 3 серебряных знака 7 7 бронзовых знаков
Подскажите, нужно создать файл download.php и прописать в него нижние скрипты ?
5 мая 2016 в 11:37

Да, вы можете создать любой php-файл (например, наш download.php). и скопировать приведенный выше код. Не забудьте указать в нем правильный путь к скачиваемому файлу.

5 мая 2016 в 12:10

$file = ‘elvideo-price.xlsx’; header(«Cache-Control: public»); header(«Content-Description: File Transfer»); header(«Content-Disposition: attachment; filename=$file»); header(«Content-Type: application/zip»); header(«Content-Transfer-Encoding: binary»); readfile($file); Пишет вот такую вот ошибку

5 мая 2016 в 13:00
подскажите, что не так делаю ?
6 мая 2016 в 7:40
@SvArt713 Для начала, все-таки, напишите текст сообщения об ошибке
6 мая 2016 в 8:56

Использовать preventDefault() в случаи, если к примеру, был отменён confirm().

 var links = document.querySelectorAll('.file'); // Вешаем обработчик "click" на все элементы с классом file for (var i = 0; i < links.length; i++) < links[i].addEventListener('click', function(e) < // Отменяем событие (преход по ссылке или submit) если "Отмена" if (!confirm('Точно будем качать?')) < e.preventDefault(); >>, false); >

Скачать файл 1 Скачать файл 2 
 
Скачать 

confirm() само собой можно заменить на то, что требуется (модальное окно например)

Отслеживать
ответ дан 5 мая 2016 в 11:13
Alexander Igorevich Alexander Igorevich
3,754 1 1 золотой знак 15 15 серебряных знаков 25 25 бронзовых знаков

Скажите, этот скрипт нужно пробовать уже на сервере или можно и на ПК, потому как я изменил, но не скачка не работает

5 мая 2016 в 11:40

Ссылки работают и сейчас в примере, и «на ПК» тоже прекрасно будут работать. Логика проста: При клике на ссылку выскакивает confirm если нажали «отмена», то отменяем переход по ссылке на file.pdf , а если нажали «ok», то ссылка ведёт себя как обычно, без изменений. С кнопкой и submit я не могу знать, что там у Вас происходит по нажатию на кнопку, куда и что отправляется. В примере выше при клике на кнопку и «отмене» происходит отмена submit .

Скрипт скачивания файла средствами php / html / JS находящегося где то на сервере?

Добрый. Затупил страшно. Возможно и вопрос будет глупый.
Есть SERVER, на нем крутится локальный сайт ( web прога ). Есть файлы, находящиеся не в папке сервера. т.е. ссылку типа server.local/images/file.png на них не даш.
Как мне их скачать/сделать на них линки средствами PHP ?
В идеале на WEB странице должно быть скачивание по кнопке.

• Вопрос задан более трёх лет назад
• 1747 просмотров

Комментировать
Решения вопроса 1

Дмитрий @Compolomus Куратор тега PHP
Комполом-быдлокодер

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

$dir = '/var/www/loc/files/'; $file_id = $_GET['file'] ?? null; if (file_exists($file = $dir . $file_id) < header('Content-Description: File Transfer'); header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="'.basename($file).'"'); header('Expires: 0'); header('Cache-Control: must-revalidate'); header('Pragma: public'); header('Content-Length: ' . filesize($file)); readfile($file); exit; >else

Ссылка будет script.php?file=image.png

Плюсы от этого
Можно ограничить доступ, например только кто зарегистрировался, ограничить скорость загрузки, прочие штуки, счётчик скачивании