Как я могу создать ссылку для скачивания в HTML?


224

У меня есть основная идея HTML. Я хочу создать ссылку для скачивания на моем примере веб-сайта, но не знаю, как ее создать. Как сделать ссылку на скачивание файла, а не посетить его?


11
Отметка принятия для этого вопроса должна быть изменена.
Пекка

Ответы:


163

Этот ответ устарел. Теперь у нас есть downloadатрибут . (см. также эту ссылку на MDN )

Если под «ссылкой для скачивания» вы подразумеваете ссылку на файл для загрузки, используйте

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

target=_blankсделает новое окно браузера появится до начала загрузки. Это окно обычно закрывается, когда браузер обнаруживает, что ресурс загружается из файла.

Обратите внимание, что типы файлов, известные браузеру (например, изображения JPG или GIF), обычно открываются в браузере.

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


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

2
Пожалуйста, пропустите "target = '_ blank'", так как это не сработает в IE. Вы даже проверяли это?
Тара

4
@Dudeson, пожалуйста, укажите, что «не будет работать» и о какой версии IE вы говорите. (Теперь можно безопасно использовать подход, описанный гораздо более недавним ответом TIIUNDER ниже, однако. Он должен получить знак согласия.)
Пекка

2
@Sergiu ответ семь лет. Я не могу удалить его, и спрашивающий не ответил на мой запрос о переключении отметки принятия ... ничего мы не можем сделать, хотя я добавлю ссылку на более актуальный ответ
Pekka

1
@Dani см. Ответ TIIUNDER ниже, который является правильным сейчас.
Пекка

455

В современных браузерах, которые поддерживают HTML5, возможно следующее:

<a href="link/to/your/download/file" download>Download link</a>

Вы также можете использовать это:

<a href="link/to/your/download/file" download="filename">Download link</a>

Это позволит вам изменить имя фактически загружаемого файла.


Я использовал один и тот же код для загрузки PFD-файла, и я протестировал во всех браузерах, все они поддерживаются, но в Safari этот код не работает Safari вместо загрузки PDF-файла, открытого в новой вкладке.
Renish Khunt

6
caniuse.com/#search=download%20attribute Работает в браузерах Chrome, Edge, Firefox, Opera и последних версиях Android 4.4+, а не в Internet Explorer и Safari.
Барт Verkoeijen

Как мне это сделать, если я создаю ссылку динамически по нажатию кнопки?
Nongthonbam Tonthoi

1
@NongthonbamTonthoi - вы не можете использовать javascript для динамического присвоения href тегу
akshay kishore

1
Это не обязательно будет работать, так как оно ограничено URL-адресами одного и того же происхождения.
Натан

22

В дополнение (или в качестве замены) к <a downloadуже упомянутому атрибуту HTML5 поведение
браузера при загрузке на диск также может быть инициировано следующим заголовком ответа http:

Content-Disposition: attachment; filename=ProposedFileName.txt;

Это был способ сделать до HTML5 (и до сих пор работает с браузерами, поддерживающими HTML5).


4
Но это требует реализации на стороне сервера, правильно?
Ломбас

@Lombas да, только сервер может установить заголовки HTTP-ответа.
Myobis

Это полный ответ? Вам также нужно отправить заголовок типа контента и прочитать файл, чтобы принудительно загрузить. Может захотеть и то, что на твой ответ. Полный ответ здесь: stackoverflow.com/a/1465631/2757916 .
Говинд Рай

это идеально подходит для реализации на стороне сервера, просто уточните также тип контента. это хорошо поддерживается по сравнению с downloadатрибутом
william.eyidi

9

Ссылка для скачивания будет ссылкой на ресурс, который вы хотите скачать. Он построен так же, как любая другая ссылка:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

8

Чтобы сделать ссылку на файл, сделайте так же, как любую другую ссылку на страницу:

<a href="...">link text</a>

Чтобы заставить вещи загружаться, даже если у них есть встроенный плагин (Windows + QuickTime = ugh), вы можете использовать это в вашем htaccess / apache2.conf:

AddType application/octet-stream EXTENSION

Спасибо! это намного проще и для всего сервера! : D Я нашел эту ссылку, которая уточняет немного больше. Спасибо. htaccess-guide.com/adding-mime-types
Джо Д.Ф.,

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

4

Этот поток, вероятно, является древним, но он работает в html5 для моего локального файла.

Для PDF-файлов:

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

Это должно открыть PDF в новых окнах и позволит вам загрузить его (по крайней мере, в Firefox). Для любого другого файла просто укажите имя файла. Для изображений и музыки вы бы хотели сохранить их в том же каталоге, что и ваш сайт. Так было бы как

<p><a href="images/logo2.png" download>test pdf</a></p>

2

Атрибут загрузки не работает в IE, он полностью игнорирует загрузку. Загрузка не работает в Firefox, если href указывает на удаленный сайт. Так что пример Одина не работает на Firefox 41.0.2.


1

Есть еще одна тонкость, которая может помочь здесь.

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

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

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

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


0

Атрибут загрузки является новым для <a>тега в HTML5

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
или
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

Я предпочитаю первый, который предпочтительнее в отношении любого расширения.


0

Вы можете скачать по-разному, вы можете следовать моим путем. Хотя файлы могут не загружаться из-за того, что разрешение 'allow-popups' не установлено, но в вашей среде это будет работать отлично

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

еще один, этот тоже не удастся из-за 'X-Frame-Options' в 'sameorigin'.

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>


-3

Как это

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

Так что файл name.jpg на сайте example.com будет выглядеть так

<a href="www.example.com/name.jpg">Image</a>

Проблема с последним заключается в том, что он открывается в браузере, а не предлагается для скачивания и сохранения.
Пекка

9
Не сработает; браузер будет относиться к нему как к относительной ссылке ./www.example.com/name.jpg- вы должны использовать http://абсолютные ссылки для указанного домена.
Делан Азабани

-7

я знаю, что опоздал, но это то, что я получил после 1 часа поиска

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        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");
        // Read the file from disk
        readfile($file); }
    }

    ?>

и для загрузки ссылки я сделал это

<a href="index.php?file=file.pdf">Download PDF</a>

6
Это ужасно. Когда я вижу такую ​​ссылку для скачивания, мне приходится сопротивляться желанию попробовать index.php? File = index.php, который в реализации копирования / вставки вашего кода в конечном итоге предоставит злоумышленнику доступ к вашей базе данных и кто что знает.
М.Страмм

1
Плохая идея. Во-первых, потому что вы заставляете свой сервер работать больше, чем необходимо. Во-вторых, потому что пользователи могут загрузить любой файл: p
Хосе Нето
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.