Jak uruchomić pobieranie pliku po kliknięciu przycisku HTML lub JavaScript
To szaleństwo, ale nie wiem, jak to zrobić, a ze względu na to, jak powszechne są słowa, Trudno znaleźć to, czego potrzebuję w wyszukiwarkach. Myślę, że to powinno być łatwe do odpowiedzi.
Chcę pobrać prosty plik, który zrobiłby to samo:
<a href="file.doc">Download!</a>
Ale chcę użyć przycisku HTML, np.:
<input type="button" value="Download!">
<button>Download!</button>
Podobnie, czy możliwe jest uruchomienie prostego pobierania przez JavaScript?
$("#fileRequest").click(function(){ /* code to download? */ });
Na pewno Nie Szukam sposób na stworzenie kotwicy wyglądającej jak przycisk, użycie skryptów zaplecza lub bałagan z nagłówkami serwera lub typami mime.
19 answers
Dla przycisku, który możesz zrobić
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-08 14:29:31
Zrobiłem kilka badań i znalazłem najlepszą odpowiedź. Możesz uruchomić pobieranie za pomocą nowego atrybutu HTML5 download.
<a href="path_to_file" download="proposed_file_name">Download</a>
Gdzie:
-
path_to_filejest ścieżką absolutną lub względną, -
proposed_file_namenazwa pliku do zapisania (może być pusta, domyślnie jest to nazwa pliku).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-23 10:39:32
Z jQuery:
$("#fileRequest").click(function() {
// // hope the server sets Content-Disposition: attachment!
window.location = 'file.doc';
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-23 21:23:49
HTML:
<button type="submit" onclick="window.open('file.doc')">Download!</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-26 09:41:25
Możesz to zrobić za pomocą" tricka " z invisible iframe. Po ustawieniu na nim "src" przeglądarka reaguje tak, jakbyś kliknął link z tym samym "href". W przeciwieństwie do rozwiązania z form, umożliwia osadzenie dodatkowej logiki, np. aktywowanie pobierania po upływie limitu czasu, gdy spełnione są pewne warunki itp.
Jest również bardzo cichy, nie ma migania nowego okna / karty, jak przy użyciu window.open.
HTML:
<iframe id="invisible" style="display:none;"></iframe>
Javascript:
function download() {
var iframe = document.getElementById('invisible');
iframe.src = "file.doc";
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-06 16:57:46
Stary wątek ale brakuje mu prostego rozwiązania js:
let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
a.click()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 09:08:52
A co z:
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-27 21:30:16
Wersja Bootstrap
<a class="btn btn-danger" role="button" href="path_to_file" download="proposed_file_name">Download</a>
Udokumentowane w Bootstrap 4 docs i działa również w Bootstrap 3.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-08 19:34:24
Myślę, że to jest rozwiązanie, którego szukałeś
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>
Miałem przypadek, w którym mój Javascript wygenerował plik CSV. Ponieważ nie ma ZDALNEGO ADRESU URL, aby go pobrać, używam następującej implementacji.
downloadCSV: function(data){
var MIME_TYPE = "text/csv";
var blob = new Blob([data], {type: MIME_TYPE});
window.location.href = window.URL.createObjectURL(blob);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-22 19:28:34
Możesz ukryć link do pobrania i sprawić, że przycisk Go kliknie.
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-09 17:28:07
Gdziekolwiek pomiędzy znacznikami <body> i </body>, Umieść przycisk używając poniższego kodu:
<button>
<a href="file.doc" download>Click to Download!</a>
</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-27 21:29:25
To jest to, co w końcu zadziałało dla mnie, ponieważ plik do pobrania został określony podczas ładowania strony.
JS do aktualizacji atrybutu action formularza:
function setFormAction() {
document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}
Wywołanie JS w celu aktualizacji atrybutu action formularza:
<body onLoad="setFormAction();">
Znacznik formularza z przyciskiem wyślij:
<form method="get" id="myDownloadButtonForm" action="">
Click to open document:
<button type="submit">Open Document</button>
</form>
PoniżejNIE Działa:
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-19 23:01:15
<a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
<button>Download <i>File.doc</i> Now!</button>
</a>
Wydaje się, że nie działa w Safari, ale działa w Chrome. Również zmiana atrybutu href linku po kliknięciu przez użytkownika wydawało się, że działa w starszych wersjach IE, ale nie w najnowszych wersjach IE lub Edge.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-25 23:53:34
Jeśli szukasz waniliowego rozwiązania JavaScript (bez jQuery) i bez użycia atrybutu HTML5, możesz spróbować tego.
const download = document.getElementById("fileRequest");
download.addEventListener('click', request);
function request() {
window.location = 'document.docx';
}.dwnld-cta {
border-radius: 15px 15px;
width: 100px;
line-height: 22px
}<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-05 21:38:20
Innym sposobem w przypadku, gdy masz złożony adres URL, taki jak file.doc?foo=bar&jon=doe, jest dodanie ukrytego pola wewnątrz formularza
<form method="get" action="file.doc">
<input ty='hidden' name='foo' value='bar'/>
<input ty='hidden' name='john' value='doe'/>
<button type="submit">Download Now</button>
</form>
Zainspirowany @ cfreak odpowiedź, która nie jest kompletna
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-27 21:30:48
Jeśli nie możesz użyć formularza, inne podejście z downloadjs pasuje nieźle. Downloadjs używa API plików blob i html 5 pod maską:
{downloadjs (url, filename)})/ >
* jest to składnia JSX/react, ale może być używana w czystym html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-07 12:55:13
Dla mnie ading button zamiast anchor text działa naprawdę dobrze.
<a href="file.doc"><button>Download!</button></a>
To może nie być w porządku przez większość zasad, ale wygląda całkiem dobrze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-27 06:08:34
Jeśli używasz znacznika <a>, nie zapomnij użyć całego adresu url, który prowadzi do pliku, np.:
<a href="http://www.example.com/folder1/file.doc">Download</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-27 21:36:12
Użyj zwykłego linku i stylizuj go tak, aby wyglądał jak przycisk, używając CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-23 21:28:44