Як викликати завантаження файлу при натисканні кнопки 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.

Для кнопки ви можете зробити

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

Ви можете запустити завантаження за допомогою downloadатрибута HTML5 .

<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 Standard для завантаження , HTML Standard ondownload , CanIUse

HTML:

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

За допомогою jQuery:

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

Стара нитка, але в ній відсутнє просте 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)

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

Це також дуже сильно, немає ніякого моргання нового вікна / вкладки, як при використанні window.open.

HTML:

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

Javascript:

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

Версія для завантаження

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

Документовано у Bootstrap 4 документах , а також працює у Bootstrap 3.

Я думаю, це рішення, яке ви шукали

<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);
}

А як на рахунок:

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

Ви можете приховати посилання для завантаження і змусити кнопку натиснути його.

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

Якщо ви шукаєте рішення для ванільного 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>

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

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();">

Якщо ви не можете скористатися формою, чудово підійде інший підхід із завантаженням . Downloadjs використовує API blob та html 5 під кришкою:

{downloadjs (URL, ім'я файлу)}) />

* це синтаксис jsx / react, але його можна використовувати в чистому HTML

У будь-якому місці між вашими тегами <body>та </body>клацніть кнопку, використовуючи наведений нижче код:

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

Це обов’язково спрацює!

Інший спосіб зробити це, якщо у вас є така складна 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, яка не є повною

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

завантажити атрибут, зробіть це

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

Якщо ви використовуєте <a>тег, не забудьте використовувати весь URL, який веде до файлу - тобто:

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

Для мене кнопка розміщення реклами замість тексту якоря працює дуже добре.

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

За більшості правил це може бути не нормальним, але це виглядає досить непогано.