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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AddType application/octet-stream EXTENSION

Этот поток, вероятно, является древним, но он работает в 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>

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

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

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

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

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

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

Атрибут загрузки является новым для <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>

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

Вы можете скачать по-разному, вы можете следовать моим путем. Хотя файлы могут не загружаться из-за того, что разрешение '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>

Как это

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

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

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

я знаю, что опоздал, но это то, что я получил после 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>