Перейти к содержимому

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

  • автор:

Как создать ссылку, чтобы посетители могли скачать
или просмотреть файл

Для любого файла вам нужно будет создать ссылку с помощью одного из доступных сервисов (Google Диск, Yandex.Disk, Облако Mail.Ru, SoundCloud и др.), то есть адрес, по которому будет доступен ваш файл.

2. Правильно назовите ссылку

Затем перейдите в текстовый редактор вашего сайта и напишите предложение, прямо указыающее, что ссылка дает доступ к файлу, а не ведет на другую веб-страницу. Мы также рекомендуем указать назначение файла. К примеру:

“Нажмите, чтобы ознакомиться с нашими Условиями использования (pdf)”

“Нажмите, чтобы скачать часть песни в формате MP3”

Use the external link button to link your files.

3. Отредактируйте ссылку

Подсветите только что написанный текст и нажмите иконку «Внешняя ссылка». В открывшемся окне вставьте ссылку для скачивания в соответствующее поле. Если вы хотите, чтобы документ открылся в текущей вкладке браузера, выберите опцию «то же окно».

4. Проверьте ссылку для скачивания

Важно проверять, работают ли созданные ссылки:
1. Включите режим «Предварительный просмотр» (иконка в виде глаза в верхней панели).
2. Нажмите на ссылку.

Как добавить файлы для скачивания на сайт: три способа размещения файлов на странице

В конструкторе «Нубекс» существует три основных способа разместить на странице сайта файлы для скачивания:

1. Прикрепить их к тексту страницы в виде гиперссылки;

Пример файла, прикрепленного к тексту страницы

2. Добавить на страницу в виде блока;

Пример файлов для скачивания, опубликованных с помощью блоков страницы

3. Вставить в узкую колонку сайта (левую или правую) с помощью виджета.

Пример файлов, опубликованных в узкой колонке сайта с помощью виджета прайс-лист

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

Способ 1. Прикрепить файл для скачивания к тексту страницы

Как показано на скриншоте выше, с помощью этого способа можно сделать ссылку на скачивание файла прямо в тексте страницы. Это удобно, если файл всего один (или их совсем немного), и для него нет смысла создавать на странице отдельный блок. Кроме того, гиперссылка в тексте смотрится весьма изящно: даже если прикрепленный файл называется «Документ1», на сайте ссылка на него отобразится в виде введенного вами текста.

Примеры отображения гиперссылок на файлы, прикрепленные к тексту страницы

Перед тем, как прикрепить файлы к тексту страницы, необходимо загрузить их в библиотеку ресурсов — виртуальное хранилище данных вашего сайта. А затем, редактируя текст страницы, выделить нужную фразу и вставить ссылку на загруженный файл. Вам помогут следующие инструкции:

Способ 2. Загрузить файлы для скачивания с помощью блоков страницы

Такой способ размещения подходит для любого количества файлов. В виде отдельного блока можно оформить, например, перечень образцов заполнения документов или подборку методических рекомендаций. Будьте внимательны к названиям загружаемых файлов: на сайте будут отображаться как введенные вами подписи, так и наименования самих документов.

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

При добавлении файлов через блоки страницы вам не нужно будет предварительно загружать их в библиотеку ресурсов. Просто создайте блок «Файлы» при редактировании страницы и загрузите нужные документы с вашего компьютера. Вот подробная инструкция по размещению файлов для скачивания с помощью блоков страницы.

Способ 3. Разместить скачиваемые файлы в узкой колонке сайта

Если композиция вашего сайта предусматривает наличие узких колонок (справа или слева), в них тоже можно разместить файлы для скачивания. Для этого подойдет виджет «Прайс-лист»: его можно использовать не только для загрузки прейскурантов, но и для добавления файлов любого формата. Единственное ограничение — количество файлов: с помощью этого способа можно загрузить не более трех документов.

Будьте внимательны: текст ссылки для скачивания будет совпадать с названием самого файла, поэтому перед загрузкой переименуйте его на своем компьютере так, чтобы пользователи могли понять его содержание.

При загрузке файлов с помощью виджета уделяйте внимание названиям

  • Как создать сайт самостоятельноКак создать сайт самостоятельно
  • Работа со страницамиРабота со страницами
  • Наполнение страницНаполнение страниц
  • Работа с изображениями и файламиРабота с изображениями и файлами
  • ФотогалереиФотогалереи
  • НовостиНовости
  • Каталог товаровКаталог товаров
  • Интернет-магазинИнтернет-магазин
  • Формы обратной связиФормы обратной связи
  • ВиджетыВиджеты
  • Функции продвиженияФункции продвижения
  • Доступ в систему управленияДоступ в систему управления
  • Внешние сервисыВнешние сервисы
  • ДизайнДизайн

How can I create download link in HTML?

I have a basic idea of HTML. I want to create the download link in my sample website, but I don’t have idea of how to create it. How do I make a link to download a file rather than visit it?

Tot Zam's user avatar

12 Answers 12

In modern browsers that support HTML5, the following is possible:

You also can use this:

This will allow you to change the name of the file actually being downloaded.

Eric Reed's user avatar

This answer is outdated. We now have the download attribute. (see also this link to MDN)

If by «the download link» you mean a link to a file to download, use

the target=_blank will make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.

Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.

You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)

Pekka's user avatar

In addition (or in replacement) to the HTML5’s <a download attribute already mentioned,
the browser’s download to disk behavior can also be triggered by the following http response header:

This was the way to do before HTML5 (and still works with browsers supporting HTML5).

Myobis's user avatar

A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:

Oded's user avatar

To link to the file, do the same as any other page link:

To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:

This thread is probably ancient by now, but this works in html5 for my local file.

<p><a href=»file:///. example.pdf» download target=»_blank»>test pdf</a></p>

This should open the pdf in a new windows and allow you to download it (in firefox at least). For any other file, just make it the filename. For images and music, you’d want to store them in the same directory as your site though. So it’d be like

There’s one more subtlety that can help here.

I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn’t work all the time because the browser’s compulsion to play the or display the file is still very strong.

BUT.. this is based on examining the extension on the URL’s filename!You don’t want to fiddle with the server’s extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download’s rename feature to fix the name.

I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn’t.

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *