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

Question

Как запустить загрузку файла при нажатии кнопки 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.

987 19

javascript html download

19 ответов:

Comments

Ничего не найдено.

Cfreak · Accepted Answer · 2017-06-08 17:29:31

для кнопки вы можете сделать
<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Joe Pigott · Accepted Answer · 2016-10-23 13:39:32

Я провел некоторое исследование и нашел лучший ответ. Вы можете запустить загрузку с помощью нового HTML5

Matt Ball · Accepted Answer · 2012-07-24 00:23:49

С помощью jQuery:

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

sleepyup · Accepted Answer · 2016-07-26 12:41:25

HTML:

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

Danubian Sailor · Accepted Answer · 2014-03-06 18:57:46

вы можете сделать это с помощью "трюка" с невидимым 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";
}

Stefanos Chrs · Accepted Answer · 2018-04-19 12:08:52

старый поток, но в нем отсутствует простое решение js:
let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
a.click()

olli · Accepted Answer · 2017-06-28 00:30:16

о:

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

CFP Support · Accepted Answer · 2018-04-08 22:34:24

Bootstrap Version
<a class="btn btn-danger" role="button" href="path_to_file" download="proposed_file_name">Download</a>
документирована в Bootstrap 4 docs, и работает в Bootstrap 3, а также.

Delconis · Accepted Answer · 2017-03-22 21:28:34

Я думаю, что это решение, которое вы искали
<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);
}

Starwarswii · Accepted Answer · 2017-06-09 20:28:07

вы можете скрыть ссылку скачивания, и сделать кнопку, нажмите на нее.
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Ronaldo · Accepted Answer · 2017-06-28 00:29:25

где между <body> и </body> теги, положить в кнопку с помощью кода ниже:
<button>
    <a href="file.doc" download>Click to Download!</a>
</button>
Это обязательно получится!

slayernoah · Accepted Answer · 2015-11-20 01:01:15

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

JS для обновления атрибута action формы:
function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}
вызов JS для обновления атрибута action формы:
<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();">

IamGuest · Accepted Answer · 2016-11-26 01:53:34

 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>
он, кажется, не работает в Safari, но он работал в Chrome. Кроме того, изменение атрибута href ссылки после нажатия пользователем, казалось, заставило его работать в более старых версиях IE, но не в последних версиях IE или Edge.

David Willhite · Accepted Answer · 2018-02-05 23:38:20

Если вы ищете решение vanilla 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>

Bellash · Accepted Answer · 2017-06-28 00:30:48

другой способ сделать в случае, если у вас есть сложный URL, такие как file.doc?foo=bar&jon=doe добавить скрытое поле в форме
<form method="get" action="file.doc">
  <input ty='hidden' name='foo' value='bar'/>
  <input ty='hidden' name='john' value='doe'/>
  <button type="submit">Download Now</button>
</form>
вдохновленный на @Cfreak ответ, который не является полным

Gleb Dolzikov · Accepted Answer · 2017-08-07 15:55:13

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

{downloadjs (url, filename)})/>

*это синтаксис jsx/react, но может использоваться в чистом html

Brana · Accepted Answer · 2017-08-27 09:08:34

для меня кнопка ading вместо якорного текста работает очень хорошо.
<a href="file.doc"><button>Download!</button></a>
это может быть не в порядке по большинству правил, но это выглядит довольно хорошо.

Mark · Accepted Answer · 2017-06-28 00:36:12

Если вы используете <a> тег, не забудьте использовать весь url, который приводит к файлу -- т. е.:
<a href="http://www.example.com/folder1/file.doc">Download</a>

Jukka K. Korpela · Accepted Answer · 2012-07-24 00:28:44

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