Mam bardzo podobny wymóg określony tutaj .
Potrzebuję, aby przeglądarka użytkownika rozpoczęła pobieranie ręcznie, kiedy $('a#someID').click();
Ale nie mogę użyć tej window.href
metody, ponieważ zastępuje ona zawartość bieżącej strony plikiem, który próbujesz pobrać.
Zamiast tego chcę otworzyć plik do pobrania w nowym oknie / karcie. Jak to jest możliwe?
javascript
jquery
download
Mithun Sreedharan
źródło
źródło
Odpowiedzi:
Użyj niewidzialnego
<iframe>
:Aby zmusić przeglądarkę do pobrania pliku, który w innym przypadku byłby w stanie renderować (np. HTML lub pliki tekstowe), potrzebujesz, aby serwer ustawił typ MIME pliku na bezsensowną wartość, taką jak
application/x-please-download-me
lub alternatywnieapplication/octet-stream
, która jest używana dla dowolnego pliku binarnego dane.Jeśli chcesz otworzyć go tylko w nowej karcie, jedynym sposobem na to jest kliknięcie linku z
target
ustawionym atrybutem_blank
.W jQuery:
Każde kliknięcie tego łącza spowoduje pobranie pliku w nowej karcie / oknie.
źródło
iframe.style.display = 'none';
ponieważ to całkowicie ukryje ramkę iframe. Twoja obecna implementacja sprawi, że iframe będzie niewidoczny, ale iframe nadal będzie zajmować miejsce na dole strony, powodując dodatkowe białe spacje.Content-Disposition: attachment; filename="downloaded.pdf"
(możesz oczywiście dostosować nazwę pliku według potrzeb).Aktualizacja nowoczesnych przeglądarek 2019
Takie podejście polecam teraz z kilkoma zastrzeżeniami:
2012 oryginalne podejście oparte na jQuery / iframe / cookie
Stworzyłem wtyczkę jQuery File Download ( Demo ) ( GitHub ), która może również pomóc w twojej sytuacji. Działa dość podobnie z ramką iframe, ale ma kilka fajnych funkcji, które znalazłem całkiem przydatne:
Bardzo łatwa w konfiguracji z ładnymi efektami wizualnymi (okno dialogowe jQuery UI, ale nie jest wymagana), wszystko jest również testowane
Użytkownik nigdy nie opuszcza tej samej strony, z której zainicjował pobieranie pliku. Ta funkcja staje się kluczowa dla nowoczesnych aplikacji internetowych
Funkcje SuccessCallback i failCallback umożliwiają wyraźne określenie tego, co użytkownik widzi w obu sytuacjach
W połączeniu z interfejsem jQuery programista może łatwo pokazać modal informujący użytkownika, że ma miejsce pobieranie pliku, rozwiązać modal po rozpoczęciu pobierania, a nawet poinformować użytkownika w przyjazny sposób, że wystąpił błąd. Zobacz Demo, aby zobaczyć przykład tego. Mam nadzieję, że to komuś pomoże!
Oto prosta wersja demonstracyjna przypadku użycia źródła wtyczek z obietnicami. Strona demonstracyjna zawiera również wiele innych przykładów „lepszego UX”.
źródło
Sprawdź, czy docelowe przeglądarki będą płynnie uruchamiać powyższy fragment kodu:
http://caniuse.com/#feat=download
źródło
document.body.appendChild(link)
przed kliknięciem, a po kliknięciu możesz zrobić,link.remove()
aby nie zanieczyścić DOM.link.download = ""
aby zachowała oryginalną nazwę pliku i uniknąć konieczności ustawiania.Dziwi mnie, że niewiele osób wie o atrybucie pobierania elementów. Pomóżcie rozpowszechnić informacje na ten temat! Możesz mieć ukryty link HTML i sfałszować kliknięcie. Jeśli link HTML ma atrybut pobierania, pobiera plik, a nie wyświetla go, bez względu na wszystko. Oto kod. Pobiera zdjęcie kota, jeśli może je znaleźć.
Uwaga: To nie jest obsługiwane we wszystkich przeglądarkach: http://www.w3schools.com/tags/att_a_download.asp
źródło
mp4
sPolecam stosując ten
download
atrybut do pobrania zamiast jQuery:Spowoduje to pobranie pliku bez otwierania go.
źródło
Jeśli już używasz jQuery, możesz z niego skorzystać, aby stworzyć mniejszy fragment
A jQuery wersja odpowiedzi Andrew:
źródło
if
Oświadczenie naprawdę powinno być:if( $idown && $idown.length > 0 )
Działa w Chrome, Firefox i IE8 i nowszych.
źródło
url
, a nie pobierze z niego.Prosty przykład z użyciem
iframe
Następnie wystarczy wywołać funkcję w dowolnym miejscu:
downloadURL('path/to/my/file');
źródło
Może to być pomocne, jeśli nie musisz nawigować po innej stronie. Jest to podstawowa funkcja javascript, więc można jej używać na dowolnej platformie, w której backend znajduje się w JavaScript
źródło
Zaledwie siedem lat później pojawia się jedno-wierszowe rozwiązanie jQuery przy użyciu formularza zamiast elementu iframe lub linku:
Przetestowałem to w
Jeśli ktoś wie o jakichkolwiek wadach tego rozwiązania, bardzo chętnie o nich usłyszę.
Pełna wersja demo:
źródło
filePath
kwerendę, ponieważ przesłanie formularza spowoduje zastąpienie kwerendy w atrybucie akcji.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
Jest to równoważny dostęp:filepath?myQsKey=myValue
window.location
dofilePath
. Po prostuwindow.location = filePath;
zrobiłbym to samo.download
atrybutu, aby powiedzieć przeglądarce, że chcesz pobrać, niezależnie od nagłówków zwracanych przez serwer, co możesz zrobić za
elementem.)Nie wiem, czy pytanie jest po prostu zbyt stare, ale ustawienie window.location do adresu URL pobierania będzie działać, o ile typ mime pobierania jest prawidłowy (na przykład archiwum zip).
źródło
Skończyło się na tym, że użyłem poniższego fragmentu i działa on w większości przeglądarek, ale nie był testowany w IE.
Aktualizacja
źródło
MouseEvent
tutaj zamiast korzystania zawszeclick
? I dlaczego dołączyć link do dokumentu przed jego kliknięciem? Może ma to przewagę nad prostszym podejściem przedstawionym w stackoverflow.com/a/23013574/1709587 , ale jeśli tak, to nie zostaną tutaj wyjaśnione.Aby poprawić odpowiedź Imagine Breaker, jest to obsługiwane w FF i IE:
Innymi słowy, po prostu użyj
dispatchEvent
funkcji zamiastclick()
;źródło
Może po prostu w javascript otworzy się strona, która po prostu pobiera plik, na przykład po przeciągnięciu łącza pobierania do nowej karty:
Przy otwartym oknie otwórz stronę pobierania, która zamyka się automatycznie.
źródło
Następuje najbardziej kompletny i działający (przetestowany) kod do pobierania danych do FireFox, Chrome i kodu IE. Załóżmy, że Dane znajdują się w polu texarea , które ma id = 'textarea_area', a nazwa pliku to nazwa pliku, do którego dane zostaną pobrane.
a potem po prostu zadzwoń
Do pobrania Inicjowanie.
Tablica do ustawiania prawidłowego typu MIME dla okna pobierania MOŻE BYĆ następująca:
źródło
dla mnie to działa ok przetestowane w chrome v72
źródło
Korzystam z tagu FORM, ponieważ działa on wszędzie i nie trzeba tymczasowo tworzyć plików na serwerze. Metoda działa w ten sposób.
Po stronie klienta (strona HTML) tworzysz taką niewidoczną formę jak ta
Następnie dodajesz ten kod JavaScript do swojego przycisku:
Po stronie serwera masz następujący kod PHP
download.php
:Możesz nawet utworzyć pliki zip swoich danych w następujący sposób:
Najlepsze jest to, że nie pozostawia żadnych plików na serwerze, ponieważ wszystko jest tworzone i niszczone w locie!
źródło
Odpowiedź przekazana przez hitesh w dniu 30 grudnia 13 faktycznie działa. Wymaga tylko niewielkiego dostosowania:
Plik PHP może się nazywać sam. Innymi słowy, po prostu utwórz plik o nazwie saveAs.php i umieść w nim ten kod ...
źródło
Te funkcje są używane w pliku stacktrace.js :
źródło
Sugeruję użycie zdarzenia mousedown, które nazywa się PRZED zdarzeniem kliknięcia. W ten sposób przeglądarka naturalnie obsługuje zdarzenie click, co pozwala uniknąć dziwnego kodu:
źródło
Doskonałe rozwiązanie od Corbacho, właśnie dostosowałem się, aby pozbyć się var
źródło
Testowane przeglądarki Firefox i Chrome:
To jest właściwie „chromowane” rozwiązanie dla Firefoxa (nie testowałem go w innych przeglądarkach, więc proszę zostawić komentarz na temat kompatybilności)
źródło
Jest tak wiele małych rzeczy, które mogą się zdarzyć podczas próby pobrania pliku. Niespójność między przeglądarkami to koszmar. Skończyło się na użyciu tej wspaniałej małej biblioteki. https://github.com/rndme/download
Zaletą jest to, że jest elastyczny nie tylko dla adresów URL, ale także dla danych po stronie klienta, które chcesz pobrać.
źródło
Można to zrobić za pomocą tagu kotwicy i PHP. Sprawdź tę odpowiedź
Wywołanie JQuery Ajax w celu pobrania pliku PDF
Sprawdzam rozmiar pliku, ponieważ jeśli załadujesz pdf z CDN Cloudfront, nie dostaniesz rozmiaru dokumentu, który zmusi dokument do pobrania w 0kb. Aby tego uniknąć sprawdzam ten warunek
źródło
Wiem, że spóźniłem się na przyjęcie, ale chciałbym podzielić się moim rozwiązaniem, które jest odmianą powyższego rozwiązania Imagine Breaker. Próbowałem użyć jego rozwiązania, ponieważ jego rozwiązanie wydaje mi się najprostsze i najłatwiejsze. Ale jak inni mówili, nie działało to w niektórych przeglądarkach, więc wprowadziłem pewne zmiany, używając jquery.
Mam nadzieję, że to może pomóc komuś tam.
źródło
window.location.href = url
. Utworzony link nie jest do niczego używany.Uwaga: Nie obsługiwane we wszystkich przeglądarkach.
Szukałem sposobu pobrania pliku przy użyciu jquery bez konieczności ustawiania adresu URL pliku w atrybucie href od samego początku.
źródło
Używam rozwiązania @ rakaloof bez JQuery (ponieważ nie potrzebujesz go tutaj ). Dziękuję za pomysł! Oto rozwiązanie oparte na formularzu vanillaJS:
źródło