Как вызвать загрузку файла при нажатии кнопки HTML или JavaScript

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

Мне нужна простая загрузка файла, которая будет делать так же, как это:

<a href="file.doc">Download!</a>

Но я хочу использовать кнопку HTML, например. любой из них:

<input type="button" value="Download!">
<button>Download!</button>

Аналогично, можно ли запускать простую загрузку через JavaScript?

$("#fileRequest").click(function(){ /* code to download? */ });

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

Ответы

Ответ 1

Для кнопки, которую вы можете сделать

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Ответ 2

Вы можете инициировать загрузку с помощью атрибута HTML5 download.

<a href="path_to_file" download="proposed_file_name">Download</a>

Где:

path_to_file - это путь, который преобразуется в URL-адрес в том же источнике. Это означает, что страница и файл должны совместно использовать один и тот же домен, поддомен, протокол (HTTP или HTTPS). и порт (если указан). Исключения составляют blob: и data: (которые всегда работают) и file: (которые никогда не работают).
proposed_file_name - это имя файла для сохранения. Если оно пустое, браузер по умолчанию использует имя файла.

Документация: MDN, стандарт HTML при загрузке, стандарт HTML на download, CanIUse

Ответ 3

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Ответ 4

С помощью jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Ответ 5

Старый поток, но в нем отсутствует простое решение js:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

Ответ 6

Вы можете сделать это с помощью "трюка" с невидимым iframe. Когда вы устанавливаете для него "src", браузер реагирует так, как будто вы нажимаете ссылку с тем же "href". В отличие от решения с формой, он позволяет встраивать дополнительную логику, например, активировать загрузку после таймаута, когда выполняются некоторые условия и т.д.

Он также очень силен, нет мигания нового окна/вкладки, например, при использовании window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

JavaScript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Ответ 7

Bootstrap версия

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Документировано в Bootstrap 4, а также работает в Bootstrap 3.

Ответ 8

Как насчет:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Ответ 9

Я думаю, что это решение, которое вы искали

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

У меня был случай, когда мой Javascript сгенерировал CSV файл. Поскольку для его загрузки нет удаленного URL-адреса, я использую следующую реализацию.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Ответ 10

Вы можете скрыть ссылку для загрузки и нажать на нее кнопку.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Ответ 11

Если вы ищете ванильное решение JavaScript (без jQuery) и без использования атрибута HTML5, вы можете попробовать это.

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

Ответ 12

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

JS для обновления атрибута действия формы:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Вызов JS для обновления атрибута действия формы:

<body onLoad="setFormAction();">

Тег формы с кнопкой отправки:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

Далее работала НЕ:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

Ответ 13

Если вы не можете использовать форму, другой подход с downloadjs подходит. Downloadjs использует blob и html 5 файлов API под капотом:

{downloadjs (url, filename)})/" >

* it jsx/реагирует на синтаксис, но может использоваться в чистом html

Ответ 14

В любом месте между тэгами <body> и </body> введите код, используя следующий код:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

Это обязательно сработает!

Ответ 15

 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     Download <i>File.doc</i> Now!
 </a>

Похоже, он не работает в Safari, но он работает в Chrome. Кроме того, изменение атрибута ссылки href после того, как пользователь щелкнул по нему, казалось, заставляет его работать в более старых версиях IE, но не в последних версиях IE или Edge. Кроме того, технически, поскольку кнопка не должна находиться внутри тега <a> в HTML5, лучше просто <a> тег <a> как кнопку, а не использовать саму кнопку. Вы также не можете поместить тег <a> внутри кнопки, хотя это будет не так эффективно, так как оно не охватывает всю кнопку в любом случае. Атрибут загрузки не работает на кнопке, он работает только на элементе <a>.

a {
text-decoration: none;
color: white;
background-color: royalblue;
padding: 5px;
border-radius: 5px;
font-family: Verdana;
}
a:hover {
filter: brightness(90%);
}

<a download="file" href="file.doc">Download File Now</a>

Ответ 16

Если у вас есть сложный URL-адрес, такой как file.doc?foo=bar&jon=doe, еще один способ сделать это - добавить скрытое поле внутри формы

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

вдохновил на ответ @Cfreak, который не является полным

Ответ 17

атрибут загрузки сделать это

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Ответ 18

Вы можете добавить тег без текста, но со ссылкой. и когда вы нажимаете кнопку, как в коде, просто запустите функцию $ ("yourlinkclass"). click().

Ответ 19

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

<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download"/> </form>

Ответ 20

Используйте обычную ссылку и создавайте ее как кнопку, используя CSS.

Ответ 21

Если вы используете тег <a>, не забудьте использовать весь URL-адрес, который ведет к файлу - i.e.:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Ответ 22

Для меня кнопка объявления вместо текста привязки работает очень хорошо.

<a href="file.doc"><button>Download!</button></a>

В большинстве правил это может быть не совсем нормально, но выглядит довольно неплохо.