Изтегляне на файл с помощта на Javascript/jQuery
Имам много подобно изискване, посочено тук.
Трябва да накарам браузъра на потребителя да започне изтегляне ръчно, когато $('a#someID').click();
Но не мога да използвам метода window.href
, тъй като той замества съдържанието на текущата страница с файла, който'се опитвате да изтеглите.
Вместо това искам да отворя изтеглянето в нов прозорец/таб. Как е възможно това?
322
3
Използвайте невидим
<iframe>
:За да принудите браузъра да изтегли файл, който иначе би могъл да визуализира (например HTML или текстови файлове), е необходимо сървърът да зададе MIME Type на файла на безсмислена стойност, като например
application/x-please-download-me
или алтернативноapplication/octet-stream
, което се използва за произволни двоични данни.Ако искате да го отворите само в нов таб, единственият начин да го направите е потребителят да щракне върху връзка, чийто атрибут
target
е зададен на_blank
.В jQuery:
При всяко щракване върху тази връзка файлът ще бъде изтеглен в нов таб/прозорец.
Актуализация на съвременните браузъри за 2019 г.
Това е подходът, който сега бих препоръчал с няколко уговорки:
2012 оригинален подход, базиран на jQuery/iframe/cookie
Създадох плъгина jQuery File Download (Demo) (GitHub), който също би могъл да помогне във вашата ситуация. Тя работи доста подобно на iframe, но има някои страхотни функции, които са ми доста полезни:
Много лесно се настройва с хубави визуални ефекти (jQuery UI Dialog, но не е задължително), всичко е тествано също
Потребителят никога не напуска същата страница, от която е започнал изтеглянето на файла. Тази функция става изключително важна за съвременните уеб приложения
Функциите successCallback и failCallback ви позволяват да посочите ясно какво вижда потребителят във всяка от двете ситуации
В съчетание с jQuery UI разработчикът може лесно да покаже модал, който да информира потребителя, че се извършва изтегляне на файл, да разпусне модала, след като изтеглянето започне, или дори да информира потребителя по приятелски начин, че е възникнала грешка. Вижте Demo за пример за това. Надявам се това да помогне на някого!
Ето една проста демонстрация на случай на употреба, в която се използва приставката източник с обещания. Страницата демо включва и много други, 'по-добри UX' примери.
Ако вече използвате jQuery, можете да се възползвате от него, за да създадете по-малък фрагмент jQuery версия на отговора на Andrew's: