To szalone, ale nie wiem, jak to zrobić, a ze względu na to, jak popularne są te słowa, trudno jest znaleźć to, czego potrzebuję w wyszukiwarkach. Myślę, że odpowiedź na to pytanie powinna być łatwa.
Chcę pobrać prosty plik, który zrobiłby to samo, co to:
<a href="file.doc">Download!</a>
Ale chcę użyć przycisku HTML, np. Jednego z tych:
<input type="button" value="Download!">
<button>Download!</button>
Podobnie, czy można uruchomić proste pobieranie przez JavaScript?
$("#fileRequest").click(function(){ /* code to download? */ });
Zdecydowanie nie szukam sposobu na stworzenie kotwicy, która wygląda jak przycisk, nie używa skryptów zaplecza ani nie zadziera z nagłówkami serwerów lub typami MIME.
javascript
html
download
brentonstrine
źródło
źródło
Odpowiedzi:
Dla przycisku możesz zrobić
źródło
Możesz uruchomić pobieranie za pomocą
download
atrybutu HTML5 .Gdzie:
path_to_file
to ścieżka, która przekształca się w adres URL tego samego źródła . Oznacza to, że strona i plik muszą mieć tę samą domenę, subdomenę, protokół (HTTP vs. HTTPS) i port (jeśli określono). Wyjątkami sąblob:
idata:
(które zawsze działają) ifile:
(które nigdy nie działają).proposed_file_name
to nazwa pliku do zapisania. Jeśli jest puste, przeglądarka domyślnie przyjmuje nazwę pliku.Dokumentacja: MDN , HTML Standard podczas pobierania , HTML Standard włączony
download
, CanIUseźródło
download
itarget="_blank"
wydaje się wystarczające do pokrycia większości przypadków użycia. Przeglądarki, które to rozumieją,download
traktują to jako pobranie, w przeciwnym razie zostanie otwarte w nowej karcie.HTML:
źródło
Z jQuery:
źródło
Stary wątek, ale brakuje w nim prostego rozwiązania js:
źródło
Możesz to zrobić za pomocą „sztuczki” z niewidocznym iframe. Po ustawieniu na niego opcji „src” przeglądarka reaguje tak, jakbyś kliknął link z tym samym „href”. W przeciwieństwie do rozwiązania z formularzem, umożliwia osadzenie dodatkowej logiki, na przykład aktywowanie pobierania po upływie limitu czasu, gdy spełnione są określone warunki itp.
Jest również bardzo cichy, nie ma migającego nowego okna / karty, jak podczas korzystania
window.open
.HTML:
JavaScript:
źródło
Wersja Bootstrap
Udokumentowane w dokumentach Bootstrap 4 i działa również w Bootstrap 3.
źródło
Myślę, że to było rozwiązanie, którego szukałeś
Mam przypadek, w którym mój Javascript wygenerował plik CSV. Ponieważ nie ma zdalnego adresu URL do pobrania, używam następującej implementacji.
źródło
location.href
rozwiązaniach.Co powiesz na:
źródło
Możesz ukryć link do pobrania i kliknąć go przyciskiem.
źródło
Jeśli szukasz waniliowego rozwiązania JavaScript (bez jQuery) i bez użycia atrybutu HTML5 możesz spróbować tego.
źródło
To w końcu działało dla mnie, ponieważ plik do pobrania został określony podczas ładowania strony.
JS, aby zaktualizować atrybut akcji formularza:
Wywołanie JS w celu zaktualizowania atrybutu akcji formularza:
Tag formularza z przyciskiem Prześlij:
Następujące NIE działało:
źródło
Jeśli nie możesz użyć formularza, inne podejście do downloadjs pasuje dobrze. Pliki do pobrania używają interfejsu API obiektów blob i HTML 5:
{downloadjs (adres URL, nazwa pliku)}) />
* Jest to składnia jsx / reag, ale może być używana w czystym formacie HTML
źródło
W dowolnym miejscu między tagiem
<body>
a</body>
tagiem umieść przycisk, używając poniższego kodu:To na pewno zadziała!
źródło
Innym sposobem postępowania w przypadku złożonego adresu URL, takiego jak
file.doc?foo=bar&jon=doe
dodanie ukrytego pola w formularzuinspirowane odpowiedzią @Cfreak, która nie jest kompletna
źródło
możesz dodać tag bez tekstu, ale z linkiem. a kiedy klikniesz przycisk tak, jak w kodzie, po prostu uruchom funkcję $ („twoja klasa połączeń”). click ().
źródło
pobierz atrybut, zrób to
źródło
Jeśli używasz
<a>
znacznika, nie zapomnij użyć całego adresu URL, który prowadzi do pliku - tj .:źródło
Dla mnie przycisk dodawania zamiast tekstu kotwicy działa naprawdę dobrze.
Może nie być w porządku według większości zasad, ale wygląda całkiem dobrze.
źródło
<a>
elementy nie mogą zawierać<button>
elementów.