Всем привет! если вы владеете интернет магазином, то ситуация которую я сейчас опишу будет вам знакома! ) Управляя интернет магазином или блогом (советую почитать мою прошлую статью как выбрать хостинг для сайта) необходимо размещать какую то информацию или прайс листы в формате (pdf, docx, xlsx) но при клике на файл, он у вас открывается в браузере, а вам надо чтобы он при клике у вас было окно с запросом скачать на компьютер! В 99% случаях будь то WordPress или Opencart там изначально идет открытие файлов в браузере и сейчас я покажу как это можно сделать в виде скачивания.
Содержание скрыть
Атрибут – Download в HTML5
✅ Сразу скажу, что данный способ можно решить разными методами, но мы рассмотрим самый простой и в этом нам поможет новый параметр тега , который появится только в HTML 5 . Данный атрибут поддерживается всеми браузерами.
Как использовать атрибут download?
✅ Данный атрибут не имеет никаких параметров просто прописываете его в ссылке и всё. После этого браузер не будет переходить по прямой ссылке, а сразу предложит скачать файл.
7.2. Ссылки на файлы. Как сделать ссылку для скачивания файла. Основы HTML верстки.
Какие файлы можно скачать используя атрибут download: pdf, xls, xlsx, doc, docx, png, jpg, mp3 и другие не открывая его.
Это можно использовать в след ситуациях:
- скачивание файла при клике на изображение
- скачивание файла при нажатии на кнопку
- скачивание изображений по клику
- принудительное скачивание файла вместо просмотра в браузере
- запустить загрузку файла при клике на ссылку или кнопку
- ⛔️ скачивание файла вместо открытия в браузере
- Как добавить ссылку для скачивания файла
Видео инструкция
Источник: nibbl.ru
Как сделать ссылку на скачивание файла
Как правильно сделать ссылку, чтобы при клике на неё начиналось скачивание файла. Атрибут download для HTML-тега ссылки. Примеры ссылок для скачивания.
Как сделать скачивание файла с сайта.
Не редкость когда нужно бывает создать ссылку для скачивания какого то файла. При этом желательно чтобы это была прямая ссылка для скачивания, а не на внешний сайт (облако, хранилище).
Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, Excel, архивы и мн. другие.
Как на сайте сделать скачивание файла
Возможно вы хотите поделиться с посетителями вашего сайта каким либо файлом, при этом файл может быть самого любого формата.
Делается это при помощи ссылки на файл с использованием специального HTML тега.
Скачивание архивов
Для файлов-архивов (форматы zip, rar и т.д.) достаточно просто указать ссылку на файл который нужно передать для скачивания. Поэтому здесь применяется обычный HTML тег ссылки:
- # — вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;
- текст ссылки — можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т.д.
Так же хочу обратить внимание, что если файл с вашего сайта указываем относительный путь к файлу /music/pesnya.mp3 , а со сторонних сайтов указываем полный путь https://v3c.ru/music/pesnya.mp3
А вот для файлов не архивных форматов (музыка, видео, различные текстовые файлы и документы, изображения и т.д.) применяется специальный для этого атрибут прописываемый в теге .
HTML атрибут download
Для того, чтобы передать какой либо файл для скачивания пользователю, в HTML ссылки нужно прописать атрибут download .
Структура ссылки для скачивания в html строится следующим образом:
- Вместо знака решётки # указываем ссылку на файл передающийся для скачивания.
- В атрибуте download ничего указывать не нужно. Браузер поймёт что файл нужно скачивать, а не открывать.
Со всплывающей подсказкой:
- В кавычках атрибута title прописываем текст всплывающей подсказки.
*Обязательно не забываем переключить редактор в режим HTML чтобы редактировать теги
Текстовая ссылка
Результат: скачать файл
Источник: v3c.ru
Как добавить ссылку для скачивания файла с блога
Здравствуйте уважаемые читатели блога. Допустим вам понадобилось сделать ссылку на скачивание какого-либо файла в статье на сайте, чтобы посетитель мог скачать себе на компьютер какую-либо полезность с вашего сайта. О том как сделать ссылку на скачивание файла мы и поговорим в данной статье.
Это довольно легко решается, если вы опытный пользователь, но для новичка может оказаться нерешаемой проблемой. Поэтому я решил записать эту статью, а также сделать видеоурок, который как раз посвящен этому вопросу.
[/sociallocker]Чтобы закачать файл, желательно сделать его меньше размером. Для этого создадим на компьютере отдельную папку, куда и поместим файлы для скачивания. Чтобы файлы занимали меньше места, желательно их сжать в архив. Архив бывает двух расширений .rar и .zip. Я рекомендую сжимать в архив .rar, так как при архивации файлы сжимаются лучше, чем при архивации в .zip формат.
Далее нам нужно выбрать место в интернете, куда поместить созданный архив. В интернете существует множество файлообменников как платных так и бесплатных, такие как depsitfiles, letitbit, и другие. При этом надо понимать, что посетителям может быть не комфортно ждать пока файлообменник покажет им рекламу, или платить деньги за то, чтобы отключить показ рекламы при скачивании файла.
Также можно воспользоваться возможностью загрузки файлов на облачные хранения информации в интернете, такие как Яндекс Диск, Мейл, или Dropbox. Но, во-первых они имеют ограничения по количеству загруженных файлов, а во-вторых также могут иногда глючить. Поэтому верным способом будет загрузить файлы с архивами непосредственно на свой блог.
Как сделать ссылку на скачивание файла через административную панель блога
Для начала нужно определиться, в какое место статьи, вы хотите вставить эту ссылку. Допустим я решил вставить ссылку в запись «Моё приветствие». Перехожу в эту запись, нажимаю по ссылке «редактировать запись» и в ней выбираю место куда вставить ссылку.
Предположим, я решил вставить ее между первым и вторым абзацем статьи, далее на панели инструментов WordPress слева, выбираю «вставить медиафайл» и в открывшемся окне нажимаю на кнопку «Выберите файлы». Указываем путь к файлу, выбираем нужный, и нажимаем «Открыть».
В заголовке вводим текст ссылки. В моем случае это файл с учетом расходов. Поэтому я ввожу текст «Учет расходов» и после этого нажимаю «Вставить в запись».
Нажимаем «обновить» и теперь перейдем на страницу «Мое приветствие». В тексте появилась ссылка, нажимая на которую открывается окно нашего компьютера, где мы можем указать место куда сохранить данный файл. Когда мы нажмем «сохранить» файл сохраниться у нас на компьютере. Получается, что мы с задачей справились.
Этот способ является самым быстрым и легким, но он подходит для файлов, размер которых не превышает 200 Mb. В случае, если файл превышает 200 Mb, нам придется закачивать его прямиком на хостинг. Теперь же, я хочу показать другой пример, который возможно вам пригодится.
Для этого вам необходимо сейчас перейти в настройки своего хостинг-провайдера, у каждого он свой, переходим в то место, где лежат папки нашего сайта. На некоторых хостингах имеются папки public.html, перейдя в которые мы найдем все папки с файлами блога, отвечающие за него. Если ваш блог сделан на движке WordPress, то это будут папки под названием wp-admin , wp-content и другие. В моем случае — это хостинг Fast VPS.
Далее нажимаем «Файловый менеджер». Переходим www, название нашего сайта, нажимаем на иконку «Новая папка», вводим название папки, например «123». Переходим во вновь созданную папку, нажав двойным щелчком левой кнопки мыши.
Теперь необходимо загрузить наш файл в созданную папку. Для этого нажимаем на иконку «Загрузить файлы», находим нужный файл и нажимаем «Открыть». Происходит загрузка файла, нужно немного подождать.
Далее, скопируем имя файла, укажем в статье еще один учет расходов. Получается у нас есть Учет расходов со ссылкой и Учет расходов 2 без ссылки. Сейчас нам необходимо сделать так, чтобы нажав по нему, также можно было скачать файл, т.е. сделать его ссылкой.
Затем жмем «Обновить», переходим в запись нажав «Посмотреть запись», и здесь видим, что Учет расходов 2 также стал ссылкой. Нажав по ней, также откроется окно, с возможностью указания пути на компьютере, куда мы хотим сохранить наш файл. Т.е у нас сейчас все работает.
Вы можете использовать по желанию 1-й или 2-й способ для того, чтобы создать ссылку на скачивание файла себе на компьютер. Итак, в этой статье мы узнали о двух способах как сделать ссылку на скачивание файла у себя на сайте или блоге. Надеюсь теперь вы всегда можете воспользоваться одним из приведенных в данном уроке способах и у вас не возникнет в дальнейшем проблем с этим.
Вам также будет интересно:
- Как скрыть партнерскую ссылку на сайте
- Установка сайта на локальный сервер
- Как найти бесплатные картинки для вашего блога с помощью Flickr
- Как добавить фавикон на сайт WordPress
- Как добавить сайт в поисковые системы Яндекс и Гугл
Источник: seodengi.ru