Это безумие, но я не знаю, как это сделать, и из-за того, как часто встречаются слова, трудно найти то, что мне нужно в поисковых системах. Я думаю, что это должно быть легко ответить.
Я хочу простую загрузку файла, которая будет делать то же самое, что и это:
<a href="file.doc">Download!</a>
Но я хочу использовать кнопку HTML, например, одну из следующих:
<input type="button" value="Download!">
<button>Download!</button>
Аналогично, возможно ли вызвать простую загрузку через JavaScript?
$("#fileRequest").click(function(){ /* code to download? */ });
Я определенно не ищу способ создать привязку, которая выглядит как кнопка, использовать какие-либо серверные сценарии или связываться с заголовками серверов или типами mime.
javascript
html
download
brentonstrine
источник
источник
Ответы:
Для кнопки вы можете сделать
источник
Вы можете запустить загрузку с
download
атрибутом HTML5 .Куда:
path_to_file
это путь , который разрешается в URL на то же происхождение . Это означает, что страница и файл должны совместно использовать один и тот же домен, поддомен, протокол (HTTP и HTTPS) и порт (если указан). Исключение составляютblob:
иdata:
(которые всегда работают), иfile:
(которые никогда не работают).proposed_file_name
имя файла для сохранения. Если он пуст, браузер по умолчанию использует имя файла.Документация: MDN , стандарт HTML на загрузку , стандарт HTML на
download
, CanIUseисточник
download
иtarget="_blank"
представляется достаточным для охвата большинства случаев использования. Браузеры, которые понимают,download
рассматривают его как загрузку, в противном случае он открывается в новой вкладке.HTML:
источник
С помощью jQuery:
источник
Старый поток, но в нем отсутствует простое решение js:
источник
Вы можете сделать это с помощью «трюка» с невидимым iframe. Когда вы устанавливаете для него «src», браузер реагирует так, как если бы вы щелкнули ссылку с тем же «href». В отличие от решения с формой, оно позволяет встроить дополнительную логику, например, активировать загрузку по истечении времени ожидания, когда выполняются некоторые условия и т. Д.
Это также очень глупо, нет нового мигающего окна / вкладки, как при использовании
window.open
.HTML:
Javascript:
источник
Bootstrap версия
Документировано в Bootstrap 4 , а также работает в Bootstrap 3.
источник
Я думаю, что это решение, которое вы искали
У меня был случай, когда мой Javascript генерировал файл CSV. Поскольку для его загрузки нет удаленного URL, я использую следующую реализацию.
источник
location.href
решениях.Что о:
источник
Вы можете скрыть ссылку на скачивание и нажать кнопку.
источник
Если вы ищете ванильное решение JavaScript (без jQuery) и без использования атрибута HTML5, вы можете попробовать это.
источник
Это то, что в итоге сработало для меня, так как файл, который нужно загрузить, был определен при загрузке страницы.
JS, чтобы обновить атрибут действия формы:
Вызов JS для обновления атрибута действия формы:
Форма тега с кнопкой отправки:
Следующее НЕ работает:
источник
Если вы не можете использовать форму, подойдет другой подход с downloadjs . Downloadjs использует блоб и html 5 файловый API под капотом:
{downloadjs (url, filename)}) />
* это синтаксис JSX / реагировать, но может использоваться в чистом HTML
источник
В любом месте между тегами
<body>
и</body>
тегами вставьте кнопку, используя следующий код:Это обязательно сработает!
источник
Еще один способ сделать это, если у вас есть сложный URL-адрес, например,
file.doc?foo=bar&jon=doe
добавить скрытое поле внутри формывдохновил на ответ @Cfreak, который не является полным
источник
Вы можете добавить тег без текста, но со ссылкой. и когда вы нажимаете кнопку, как в коде, просто запустите функцию $ ("yourlinkclass"). click ().
источник
атрибут загрузки сделать это
источник
Если вы используете
<a>
тег, не забудьте использовать весь URL, который ведет к файлу, то есть:источник
Для меня кнопка добавления вместо якорного текста работает очень хорошо.
Это может быть не совсем нормально по большинству правил, но выглядит довольно хорошо.
источник
<a>
элементы не могут содержать<button>
элементы.