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

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

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

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

   Загрузить

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

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

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

471

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

   Ссылка для скачивания

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

   Ссылка для загрузки

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

отредактировал 24 марта ’16 в 12:40

Эрик Рид

32911 золотой значок55 серебряные знаки1717 бронзовых знаков

1 мая ’13 в 13: 562013-05-01 13:56

1

Я использовал тот же код для загрузки файла PFD и Я тестировал во всех браузерах, все они поддерживаются, но в сафари этот код не работает сафари вместо загрузки файла PDF, открытого в новой вкладке. — Рениш Хант, 23 фев. 2015, в 8:14
7

caniuse.com/#search=download%20attribute Работает в Chrome, Edge, Firefox, Opera и последних версиях браузеров Android 4.4+, но не в Internet Explorer и Safari.. — Барт Веркойен 01 апр. В 1:17
Как мне это сделать, если я создаю ссылку динамически при нажатии кнопки? — Nongthonbam Tonthoi 10 марта 2017, в 17:51
1

@NongthonbamTonthoi нельзя использовать javascript для динамического присвоения href тегу a — akshay kishore 3 апр. ’19 в 12:17
5

Это не обязательно сработает, так как это ограничено URL-адресами того же происхождения. — Натан 01 июн.2020, в 20:44

| показать 1 дополнительный комментарий

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

   Ссылка для загрузки

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

   Ссылка для загрузки

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

В дополнение (или вместо) к уже упомянутому атрибуту HTML5

браузера em> загрузка на диск также может быть вызвана следующим заголовком HTTP-ответа:

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

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

отредактировано 11 июля ’14 в 9:45

ответ дан 11 июля ’14 в 9:32

5

Но для этого нужна реализация на стороне сервера, верно? — Ломбас, 25 ноя. 2015, в 16:01
@Lombas да, только сервер может устанавливать заголовки ответа http. — Myobis, 26 ноя. 2015, в 8:36
Это полный ответ? Вам также необходимо отправить заголовок Content Type и прочитать файл для принудительной загрузки. Может, захочется и то на ваш ответ. Полный ответ здесь: stackoverflow.com/a/1465631/2757916. — Говинд Рай, 25 сен 2016, в 07:10
это идеально подходит для реализации на стороне сервера, точно также тип содержимого. он хорошо поддерживается по сравнению с атрибутом download — william.eyidi 22 июня 2017 г., 15:43

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

В дополнение (или вместо) к уже упомянутому атрибуту HTML5 поведение браузера загрузки на диск также может быть вызвано следующим заголовком HTTP-ответа:

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

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

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

   Link   Ссылка на установщик

ответил 8 мая ’10 в 10:50

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

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

   Link   Ссылка на программу установки

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

   текст ссылки

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

  AddType application/octet-stream EXTENSION

ответил 8 мая 2010 г., 10:53

Спасибо! это намного проще и распространяется на весь сервер! : D Я нашел эту ссылку, которая уточняет немного больше. Спасибо. htaccess-guide.com/adding-mime-types — Джо Д.Ф. 27 апр. 2014 г., в 1:36
Это заставит загружать все файлы этого типа только. Хорошо, если вы этого хотите, но может вызвать припадки, если вы забудете и захотите, чтобы другой файл этого типа отображался в браузере вместо загрузки. — TecBrat 21 сен. ’15 в 18:08

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

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

   текст ссылки

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

  AddType application/octet-stream EXTENSION

Вероятно, эта ветка уже устарела, но она работает в html5 для моего локального файла.

Для файлов PDF:


  test pdf

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

   test pdf

ответил 4 сен 2015, в 2:26

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

Вероятно, эта ветка уже устарела, но она работает в html5 для моего локального файла.

Для PDF-файлы:


  тестовый PDF-файл

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

   test pdf

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

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

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

   Загрузить   Воспроизвести

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

ответил 26 сен ’19 в 23:34

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

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

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

   Загрузить   Воспроизвести

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

Загрузить форму
или
Загрузить форму

Я предпочитаю первую, она предпочтительнее по сравнению с любым расширением.

отредактировал 3 ноября 2015 в 23:39

Ян Томпсон

17211 серебряных знаков1010 бронзовых знаков

ответил 27 октября 2015 г. в 17:28

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

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

Загрузить форму
или
Загрузить форму

I предпочтительнее первое, оно предпочтительнее по сравнению с любым расширением.

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

    Тестовая загрузка

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

отредактировано 20 августа 2019 в 06:34

ответил 08 авг. в 8:20

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

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

    Тестовая загрузка

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

-3

Вот так

   Название ссылки

Таким образом, файл name.jpg на сайте example.com будет выглядеть следующим образом:

   Изображение

ответил 8 мая 2010 в 10: 53

Проблема с последним в том, что он открываться в браузере, не предлагаться для скачивания и сохранения. — Пекка, 8 мая 2010 г., 10:53
9

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

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

Вот так

   Имя ссылки

Таким образом, файл name.jpg на сайте example.com будет выглядеть следующим образом

   Изображение

-7

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

    php $ file = 'file.pdf';  если (! файл) {умереть ('файл не найден'); //Или сделаем что-нибудь} еще {if (isset ($ _ GET ['file'])) {//Установить заголовки header ("Cache-Control: public");  заголовок ("Content-Description: File Transfer");  заголовок ("Content-Disposition: attachment; filename = $ file");  заголовок ("Content-Type: application/zip");  заголовок ("Content-Transfer-Encoding: двоичный"); //Считываем файл с диска readfile ($ file);  }}?>

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

   Загрузить PDF

ответ дан 06 марта ’16 в 14: 47

7

Это ужасно. Когда я вижу такую ссылку для скачивания, мне приходится сопротивляться желанию попробовать index.php? file = index.php, который в реализации копирования/вставки вашего кода в конечном итоге предоставит злоумышленнику доступ к вашей базе данных и неизвестно к чему. — М. Страмм, 31 марта 2018 г., 1:41
1

Плохая идея. Во-первых, потому что вы заставляет ваш сервер работать больше, чем необходимо. Во-вторых, потому что пользователи могут загружать любой файл: p — Хосе Нето, 19 августа 2018, 9:07

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

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

   php $ file = 'file.pdf'; if (! file) {die ('file not found');//Или сделаем что-нибудь} else {if (isset (  $ _GET ['file'])) {//Установить заголовки header ("Cache-Control: public"); header ("Content-Descri  пункт: Передача файлов »);  заголовок ("Content-Disposition: attachment; filename = $ file");  заголовок ("Content-Type: application/zip");  заголовок ("Content-Transfer-Encoding: двоичный"); //Считываем файл с диска readfile ($ file);  }}?>

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

   Загрузить PDF

Chrome распознает все ссылки для скачивания как файлы html — Сообщество Google Chrome

Chrome распознает все ссылки для скачивания на всех веб-страницах как файлы html, обычно как «download.html». Если я попытаюсь использовать опцию «Сохранить ссылку как …» правой кнопкой мыши, она просто загрузит бесполезный крошечный файл HTML. Из-за этого я должен теперь использовать Firefox для загрузки всех веб-ссылок. Как я могу исправить Chrome, чтобы ссылки на странице указывали на настоящий целевой файл, а не просто на другую ссылку html? Спасибо!

Я удалил менеджер бесплатных загрузок из расширений Chrome. Щелкните правой кнопкой мыши маленький значок рядом с изображением вашего профиля (это синяя стрелка, указывающая вправо), затем выберите удаление из Chrome.

Это решено проблема для меня.