Jak uruchomić pobieranie pliku po kliknięciu przycisku HTML lub JavaScript

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.

Dla przycisku możesz zrobić

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Możesz uruchomić pobieranie za pomocą downloadatrybutu HTML5 .

<a href="path_to_file" download="proposed_file_name">Download</a>

Gdzie:

• path_to_fileto ś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:i data:(które zawsze działają) i file:(które nigdy nie działają).
• proposed_file_nameto nazwa pliku do zapisania. Jeśli jest puste, przeglądarka domyślnie przyjmuje nazwę pliku.

Dokumentacja: MDN , HTML Standard podczas pobierania , HTML Standard włączonydownload , CanIUse

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Z jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Stary wątek, ale brakuje w nim prostego rozwiązania js:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

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:

<iframe id="invisible" style="display:none;"></iframe>

JavaScript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Wersja Bootstrap

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Udokumentowane w dokumentach Bootstrap 4 i działa również w Bootstrap 3.

Myślę, że to było rozwiązanie, którego szukałeś

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

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.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Co powiesz na:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Możesz ukryć link do pobrania i kliknąć go przyciskiem.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

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>

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:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Wywołanie JS w celu zaktualizowania atrybutu akcji formularza:

<body onLoad="setFormAction();">

Tag formularza z przyciskiem Prześlij:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

Następujące NIE działało:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

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

W dowolnym miejscu między tagiem <body>a </body>tagiem umieść przycisk, używając poniższego kodu:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

To na pewno zadziała!

Innym sposobem postępowania w przypadku złożonego adresu URL, takiego jak file.doc?foo=bar&jon=doedodanie ukrytego pola w formularzu

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

inspirowane odpowiedzią @Cfreak, która nie jest kompletna

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 ().

pobierz atrybut, zrób to

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Jeśli używasz <a>znacznika, nie zapomnij użyć całego adresu URL, który prowadzi do pliku - tj .:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Dla mnie przycisk dodawania zamiast tekstu kotwicy działa naprawdę dobrze.

<a href="file.doc"><button>Download!</button></a>

Może nie być w porządku według większości zasad, ale wygląda całkiem dobrze.