Как в HTML сделать кнопку для скачивания файла вместо открытия в браузере | Уроки HTML, CSS

Некоторые браузеры, по умолчанию и после “пользовательской настройки“, открывают файлы определенных форматов внутри себя на просмотр. Чаще всего это .pdf, .txt и изображения, и естественно медиа-файлы. Если нужна ссылка именно на скачивание, а не на открытие файла, то нужно сделать следующее: В HTML5 это к тегу A просто добавить атрибут download, без каких-либо значений, для ранней версии – тот же атрибут download только присваиваем значение, например - имя файла, под которым будет скачиваться файл. Вот пример ссылки на скачивание файла: [a href=“ “ download=“Инструкция к МП.pdf“] Скачать инструкцию [/a] Вот пример ссылки в виде кнопки на скачивание файла: [a href=“ “ title=“Скачать инструкцию“ download=“Инструкция к МП.pdf“][button]Инструкция к МП [/button][/a] Вот пример ссылки в виде картинки кнопки на скачивание файла: [a href=“ “ title=“Скачать инструкцию“ download=“Инструкция к МП.pdf“][img src=“ “ alt=“ Инструкция к МП “ /][/a] Обратите внимание – что скачка файла, если вы ваш html документ запустили на локальной машине, происходить не будет, т.к. браузер и так видит что этот файл лежит у вас. Если вы выложите этот файл на хостинг, то этот атрибут будет работать и браузер будет предлагать скачать, если нет той галочки – что открывать все PDF документы в самом браузере. Для принудительного скачивания файла, вне зависимости от настроек браузера – вы должны в корень сайта выложенного на хостинг добавить следующие строки в файл .htaccess: ForceType application/octet-stream [IfModule mod_charset.c] CharsetRecodeMultipartForms off [FilesMatch “\.(gif|jpe?g|png)$“] ForceType none [/FilesMatch] Options None # Options -ExecCGI php_flag_engine off [/IfModule] Или так, только для PDF (на хостинг добавить следующие строки в файл .htaccess): [filesmatch “\.(?i:pdf)$“=““] ForceType application/octet-stream Header set Content-Disposition attachment *** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! *** #html #файл #скачивание #file #Трёхгорка #Одинцово #дизайн #design Подписывайтесь на наш канал в YouTube: Вступайте в нашу группу ВК: Задавайте вопросы – постараюсь ответить 😊 Удачи в таких классных начинаниях!