У меня есть очень похожее требование, указанное здесь .
Мне нужно, чтобы браузер пользователя запускал загрузку вручную, когда $('a#someID').click();
Но я не могу использовать этот window.href
метод, поскольку он заменяет содержимое текущей страницы файлом, который вы пытаетесь загрузить.
Вместо этого я хочу открыть загрузку в новом окне / вкладке. Как это возможно?
javascript
jquery
download
Митхун Шридхаран
источник
источник
Ответы:
Используйте невидимое
<iframe>
:Чтобы заставить браузер загружать файл, который в противном случае он мог бы отображать (например, HTML или текстовые файлы), необходимо, чтобы сервер установил для MIME-типа файла бессмысленное значение, такое как
application/x-please-download-me
или альтернативноapplication/octet-stream
, которое используется для произвольного двоичного файла. данные.Если вы хотите открыть его только на новой вкладке, единственный способ сделать это - щелкнуть ссылку с
target
атрибутом, установленным пользователем_blank
.В jQuery:
При щелчке по этой ссылке файл загружается в новую вкладку / окно.
источник
iframe.style.display = 'none';
как это будет полностью скрыть iframe. Ваша текущая реализация сделает iframe невидимым, но iframe все равно будет занимать место внизу страницы, вызывая дополнительные пробелы.Content-Disposition: attachment; filename="downloaded.pdf"
(конечно, вы можете настроить имя файла так, как вам нужно).2019 обновление современных браузеров
Такой подход я бы сейчас рекомендовал с несколькими оговорками:
2012 оригинальный подход на основе jQuery / iframe / cookie
Я создал плагин jQuery File Download ( Demo ) ( GitHub ), который также может помочь в вашей ситуации. Он работает примерно так же с iframe, но имеет несколько интересных функций, которые я нашел довольно полезными:
Очень легко настроить с красивыми визуальными эффектами (JQuery UI Dialog, но не обязательно), все тоже протестировано
Пользователь никогда не покидает ту же страницу, с которой он инициировал загрузку файла. Эта функция становится критически важной для современных веб-приложений
Функции successCallback и failCallback позволяют вам четко указывать, что пользователь видит в любой ситуации
В сочетании с пользовательским интерфейсом jQuery разработчик может легко показать модальное сообщение, информирующее пользователя о том, что происходит загрузка файла, распустить модальное устройство после начала загрузки или даже дружески проинформировать пользователя о том, что произошла ошибка. Посмотрите Демо для примера этого. Надеюсь, это поможет кому-то!
Вот простая демонстрация варианта использования с использованием исходного кода плагина с обещаниями. Демонстрационная страница включает в себя множество других, «лучше» UX примеров.
источник
Проверьте, будут ли ваши целевые браузеры беспрепятственно запускать приведенный выше фрагмент кода:
http://caniuse.com/#feat=download
источник
document.body.appendChild(link)
до и после щелчка,link.remove()
чтобы избежать загрязнения DOM.link.download = ""
чтобы оно сохраняло свое первоначальное имя файла и избегало его установки.Я удивлен, что мало кто знает об атрибуте загрузки элементов. Пожалуйста, помогите распространить информацию об этом! Вы можете иметь скрытую ссылку html и подделать клик по ней. Если ссылка html имеет атрибут загрузки, она загружает файл, а не просматривает его, несмотря ни на что. Вот код Он загрузит изображение кота, если сможет его найти.
Примечание. Это поддерживается не во всех браузерах: http://www.w3schools.com/tags/att_a_download.asp.
источник
mp4
sЯ рекомендую использовать в
download
атрибут для загрузки вместо JQuery:Это загрузит ваш файл, не открывая его.
источник
Если вы уже используете jQuery, вы можете использовать его для создания меньшего фрагмента
. Версия ответа JQuery Эндрю:
источник
if
Заявление действительно должно быть:if( $idown && $idown.length > 0 )
Работает на Chrome, Firefox и IE8 и выше.
источник
url
, а не загружаться с него.Простой пример использования
iframe
Затем просто вызовите функцию, где вы хотите:
downloadURL('path/to/my/file');
источник
Это может быть полезно, если вам не требуется переходить на другую страницу. Это базовая функция javascript, поэтому ее можно использовать на любой платформе, где бэкэнд находится в Javascript.
источник
Спустя всего семь лет здесь появляется однострочное решение jQuery с использованием формы вместо фрейма или ссылки:
Я проверил это в
Если кто-нибудь знает какие-либо недостатки этого решения, я был бы очень рад услышать о них.
Полная демонстрация:
источник
filePath
есть строка запроса, так как отправка формы перезапишет строку запроса в атрибуте действия.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
Это эквивалентно доступу:filepath?myQsKey=myValue
window.location
вfilePath
. Простоwindow.location = filePath;
сделал бы то же самое.download
атрибут таким образом, чтобы сообщить браузеру, что вы хотите загрузить, независимо от того, какие заголовки возвращает сервер, что вы можете сделать сa
элементом.)Я не знаю, является ли вопрос слишком старым, но установка window.location в URL для загрузки будет работать, если тип mime для загрузки правильный (например, zip-архив).
источник
В итоге я использовал приведенный ниже фрагмент кода, и он работает в большинстве браузеров, хотя и не тестировался в IE.
Обновить
источник
MouseEvent
здесь вместо того, чтобы всегда использоватьclick
? А зачем добавлять ссылку на документ перед тем, как щелкнуть по нему? Может быть, это имеет преимущества перед более простым подходом, показанным на stackoverflow.com/a/23013574/1709587 , но если это так, то здесь они не объясняются.Чтобы улучшить ответ Imagine Breaker, это поддерживается в FF & IE:
Другими словами, просто используйте
dispatchEvent
функцию вместоclick()
;источник
Может быть, просто попросите ваш javascript открыть страницу, которая просто загружает файл, например, когда вы перетаскиваете ссылку на скачивание на новую вкладку:
При открытом окне откройте страницу загрузки, которая автоматически закрывается.
источник
Ниже приведен наиболее полный и работающий (протестированный) код для загрузки данных для FireFox, Chrome и IE. Предположим, что Data находится в поле texarea , которое имеет id = 'textarea_area', а имя файла - это имя файла, в который будут загружаться данные.
а потом просто позвони
Для начала загрузки.
Массив для установки правильного типа MIME для диалога загрузки МОЖЕТ быть следующим:
источник
у меня это работает нормально проверено в chrome v72
источник
У меня были хорошие результаты с использованием тега FORM, так как он работает везде, и вам не нужно временно создавать файлы на сервере. Метод работает следующим образом.
На стороне клиента (страница HTML) вы создаете невидимую форму, подобную этой
Затем вы добавляете этот код Javascript к вашей кнопке:
На стороне сервера у вас есть следующий PHP-код
download.php
:Вы даже можете создавать zip-файлы с вашими данными следующим образом:
Самое приятное, что он не оставляет на вашем сервере никаких остаточных файлов, поскольку все создается и уничтожается на лету!
источник
Ответ, представленный hitesh 30 декабря 13 года, фактически работает. Это просто требует небольшой корректировки:
Файл PHP может вызывать сам себя. Другими словами, просто создайте файл с именем saveAs.php и вставьте в него этот код ...
источник
Эти функции используются в stacktrace.js :
источник
Я предлагаю вам использовать событие mousedown, которое называется ДО события click. Таким образом, браузер обрабатывает событие click естественным образом, что позволяет избежать любой странности кода:
источник
Отличное решение от Corbacho, я просто приспособился, чтобы избавиться от вар
источник
Firefox и Chrome протестированы:
На самом деле это «хромовое» решение для Firefox (я не тестировал его в других браузерах, поэтому, пожалуйста, оставляйте комментарии о скомпилируемости)
источник
При загрузке файла может случиться так много мелочей. Несоответствие между одними браузерами - это кошмар. В итоге я использовал эту замечательную маленькую библиотеку. https://github.com/rndme/download
Приятно то, что он гибок не только для URL, но и для данных на стороне клиента, которые вы хотите загрузить.
источник
С помощью тега привязки и PHP это можно сделать. Проверьте этот ответ
JQuery Ajax для загрузки файла PDF
Я проверяю размер файла, потому что если вы загружаете pdf из облачного фронта CDN, вы не получите размер документа, который заставляет документ загружаться в 0 КБ. Чтобы избежать этого, я проверяю это условие
источник
Я знаю, что опаздываю на вечеринку, но я хотел бы поделиться своим решением, которое является вариантом решения Imagine Breaker выше. Я пытался использовать его решение, потому что его решение кажется мне наиболее простым и легким. Но, как говорили другие, он не работал для некоторых браузеров, поэтому я добавил некоторые изменения с помощью jquery.
Надеюсь, что это может помочь кому-то там.
источник
window.location.href = url
. Ссылка, которую вы создаете, ни для чего не используется.Примечание. Поддерживается не во всех браузерах.
Я искал способ загрузить файл с помощью jquery, не устанавливая URL-адрес файла в атрибуте href с самого начала.
источник
Я использую решение @ rakaloof без JQuery (потому что оно вам здесь не нужно ). Спасибо за идею! Вот решение на основе форм vanillaJS:
источник