Как запустить загрузку файла при нажатии кнопки 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.
30 ответов
Для кнопки вы можете сделать
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
Я провел некоторое исследование и нашел лучший ответ. Вы можете запустить загрузку, используя новый HTML5 download приписывать.
<a href="path_to_file" download="proposed_file_name">Download</a>
Куда:
path_to_fileявляется абсолютным или относительным путем,proposed_file_nameимя файла для сохранения (может быть пустым, затем по умолчанию используется фактическое имя файла).
Надеюсь, это полезно.
Старый поток, но в нем отсутствует простое решение js:
let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
a.click()
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';
});
Вы можете сделать это с помощью "трюка" с невидимым 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";
}
Bootstrap версия
<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);
}
Вы можете скрыть ссылку на скачивание и нажать кнопку.
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
Как насчет:
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
В моем тестировании следующее работает для всех типов файлов и браузеров, если вы используете относительную ссылку:
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
-
/assets/hello.txtэто просто относительный путь на моем сайте. Измените его на свой собственный относительный путь. -
my_file.txtэто имя, по которому файл будет называться при загрузке.
Объяснение
Я заметил, что под многими ответами были комментарии, в которых говорилось, что браузер просто попытается открыть сам файл, а не загружать его, в зависимости от типа файла. Я обнаружил, что это правда.
Я сделал две кнопки, чтобы проверить это двумя разными способами:
<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
Примечания:
- Кнопка 1 открывает текстовый файл в новой вкладке браузера. Однако кнопка 1 будет загружать файлы для типов файлов, которые она не может открыть сама (например, файлы .apk).
- Кнопка 2 загрузила текстовый файл. Однако кнопка 2 загружала файл только в том случае, если путь был относительным. Когда я изменил путь на абсолютный, браузер открыл его в новой вкладке.
Я тестировал это в Firefox, Safari и Chrome.
Здравствуйте, я просто включил слово «скачать» и работает хорошо.
<a href="file.pdf" download>Download</a>
Итак, в javascript вы можете использовать следующее:
function onStartedDownload(id) {
console.log(`Started downloading: ${id}`);
}
function onFailed(error) {
console.log(`Download failed: ${error}`);
}
var downloadUrl = "https://example.org/image.png";
var downloading = browser.downloads.download({
url : downloadUrl,
filename : 'my-image-again.png',
conflictAction : 'uniquify'
});
downloading.then(onStartedDownload, onFailed);
Если вы ищете ванильное решение 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>все, что вам нужно сделать, это добавить «Загрузить» после имени файла, которое вы ввели:
До:
<a href="file.doc">Download!</a>
После
<a href="file.doc" Download >Download!</a>
Убедитесь, что загрузка написана с большой буквы, иначе она не будет работать.
<a href="file.doc"><button>Download!</button></a>
Один из самых простых способов использования кнопки и
text-decoration поможет изменить или убрать текстовое оформление ссылки.
Это то, что, в конце концов, сработало для меня, так как загружаемый файл был определен при загрузке страницы.
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();">
Где-нибудь между вашим <body> а также </body> теги, вставьте в кнопку, используя код ниже:
<button>
<a href="file.doc" download>Click to Download!</a>
</button>
Это обязательно сработает!
Если хочешь
<a href="path_to_file" download="proposed_file_name">Download</a>
для возможности загружать файлы, которые в противном случае были бы отображены браузером, но все же хотите, чтобы в кнопке использовалась аккуратная функция javascript; вы можете иметь невидимую ссылку в html и щелкнуть по ней в javascript.
На самом деле это не ответ на исходный вопрос, но он может помочь другим, которые сталкиваются с такими же ситуациями, как и я.
Если файл, который вы хотите загрузить, не размещен в том же источнике, но вы хотите иметь возможность загрузить его, вы можете сделать это с помощью
Content-Disposition заголовок . Убедитесь, что сервер включает заголовок при ответе на запросы файла.
Установка значения, подобного
Content-Disposition: attachmentгарантирует, что файл будет загружен, а не просмотрен в браузере.
Простой
<a href="http://www.notMyOrigin.com/file.txt">Download</a>указание на ваш файл должно загрузить его в этом случае.
Если вы не можете использовать форму, подойдет другой подход с downloadjs. Downloadjs использует блоб и html 5 файловый API под капотом:
{downloadjs (url, filename)}) />
* это синтаксис JSX / реагировать, но может использоваться в чистом HTML
<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.
Есть разница между загрузкой файла и скачиванием файла. Следующий html-код загружает файл:
<a href="http://www.fbi.gov/top-secret.pdf">loading on the same tab</a>
После нажатия на эту ссылку ваша текущая вкладка будет заменена pdf-файлом, который затем можно будет скачать. Щелкнув правой кнопкой мыши по этой ссылке, вы можете выбрать пункт меню " Сохранить ссылку" для непосредственной загрузки файла. Если вы хотите получить диалоговое окно " Сохранить как " при нажатии на такую ссылку, вы можете взять следующий код:
<a href="http://www.fbi.gov/top-secret.pdf?download=1">save as...</a>
Ваш браузер немедленно загрузит этот файл, если вы решите использовать каталог загрузки в своих опциях. В противном случае ваш браузер предложит сохранить как-диалог.
Вы также можете выбрать кнопку для скачивания:
<button type="submit" onclick="window.open('http://www.fbi.gov/top-secret.pdf?download=1')">
save as...
</button>
Если вы хотите загрузить ссылку на новой вкладке, вы выбираете
<a href="http://www.fbi.gov/top-secret.pdf" target="_blank">loading on a new tab</a>
Элемент формы не учитывает директиву ? Download =1. Он учитывает только директиву target = "_ blank":
<form method="get" action="http://www.fbi.gov/top-secret.pdf" target="_blank">
<button type="submit">loading on a new tab</button>
</form>
Вы можете просто использовать:
<form action="/file.doc" align="center">
<input type="submit" id="custom-buttons" value="Click Here To Download" />
</form>
Решение, которое я придумал, заключается в том, что вы можете использовать атрибут загрузки в теге привязки, но он будет работать только в том случае, если ваш html-файл находится на сервере. но у вас может возникнуть вопрос, например, при разработке простой html-страницы, как мы можем проверить, что для этого вы можете использовать VS code live server или скобки live server, и вы увидите, что ваш атрибут загрузки будет работать, но если вы попытаетесь открыть его просто просто дважды щелкнув html-страницу, он открывает файл вместо его загрузки. Вывод: загрузка атрибута в теге привязки работает только в том случае, если ваш html файл не является сервером.
Еще один способ сделать, если у вас есть сложный 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, который не является полным
Вы можете добавить тег без текста, но со ссылкой. и когда вы нажмете кнопку, как в коде, просто запустите функцию $("yourlinkclass").click().
Для меня кнопка добавления вместо привязки текста работает очень хорошо.
<a href="file.doc"><button>Download!</button></a>
Это может быть не совсем нормально по большинству правил, но выглядит довольно хорошо.
Атрибут загрузки сделать это
<a class="btn btn-success btn-sm" href="/file_path/file.type" download>
<span>download </span> <i class="fa fa-download"></i>
</a>
Если вы используете <a> тег, не забудьте использовать весь URL, который ведет к файлу - то есть:
<a href="http://www.example.com/folder1/file.doc">Download</a>
Используйте обычную ссылку и стилизуйте ее, чтобы она выглядела как кнопка, используя CSS.