So lösen Sie einen Dateidownload aus, wenn Sie auf eine HTML-Schaltfläche oder JavaScript klicken

Das ist verrückt, aber ich weiß nicht, wie ich das machen soll, und weil die Wörter so häufig vorkommen, ist es schwierig, in Suchmaschinen zu finden, was ich brauche. Ich denke, das sollte leicht zu beantworten sein.

Ich möchte einen einfachen Dateidownload, der das Gleiche tun würde:

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

Ich möchte jedoch eine HTML-Schaltfläche verwenden, z. B. eine der folgenden:

<input type="button" value="Download!">
<button>Download!</button>

Ist es auch möglich, einen einfachen Download über JavaScript auszulösen?

$("#fileRequest").click(function(){ /* code to download? */ });

Ich bin definitiv nicht auf der Suche nach einer Möglichkeit, einen Anker zu erstellen, der wie eine Schaltfläche aussieht, Back-End-Skripte zu verwenden oder mit Server-Headern oder MIME-Typen herumzuspielen.

Für die Schaltfläche können Sie tun

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

Sie können einen Download mit dem HTML5- downloadAttribut auslösen .

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

Wo:

• path_to_fileist ein Pfad, der in eine URL mit demselben Ursprung aufgelöst wird . Das bedeutet, dass die Seite und die Datei dieselbe Domäne, Unterdomäne, dasselbe Protokoll (HTTP vs. HTTPS) und denselben Port (falls angegeben) haben müssen. Ausnahmen sind blob:und data:(die immer funktionieren) und file:(die nie funktionieren).
• proposed_file_nameist der Dateiname, in dem gespeichert werden soll. Wenn es leer ist, verwendet der Browser standardmäßig den Dateinamen.

Dokumentation: MDN , HTML Standard beim Herunterladen , HTML Standard beidownload , CanIUse

HTML:

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

Mit jQuery:

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

Alter Thread, aber es fehlt eine einfache js-Lösung:

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)

Sie können es mit "Trick" mit unsichtbarem Iframe tun. Wenn Sie "src" festlegen, reagiert der Browser so, als würden Sie auf einen Link mit demselben "href" klicken. Im Gegensatz zur Lösung mit Formular können Sie zusätzliche Logik einbetten, z. B. das Aktivieren des Downloads nach einer Zeitüberschreitung, wenn einige Bedingungen erfüllt sind usw.

Es ist auch sehr leise, es gibt kein blinkendes neues Fenster / Tab wie bei der Verwendung window.open.

HTML:

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

Javascript:

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

Bootstrap-Version

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

Dokumentiert in Bootstrap 4-Dokumenten und funktioniert auch in Bootstrap 3.

Ich denke, das ist die Lösung, nach der Sie gesucht haben

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

Ich hatte einen Fall, in dem mein Javascript eine CSV-Datei generiert hat. Da es keine Remote-URL zum Herunterladen gibt, verwende ich die folgende Implementierung.

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

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

Wie wäre es mit:

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

Sie können den Download-Link ausblenden und die Schaltfläche darauf klicken lassen.

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

Wenn Sie nach einer Vanille-JavaScript-Lösung (kein jQuery) suchen und das HTML5-Attribut nicht verwenden möchten, können Sie dies versuchen.

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>

Dies hat schließlich für mich funktioniert, da die herunterzuladende Datei beim Laden der Seite ermittelt wurde.

JS, um das Aktionsattribut des Formulars zu aktualisieren:

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

JS aufrufen, um das Aktionsattribut des Formulars zu aktualisieren:

<body onLoad="setFormAction();">

Formular-Tag mit der Schaltfläche "Senden":

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

Folgendes hat NICHT funktioniert:

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

Wenn Sie kein Formular verwenden können, passt ein anderer Ansatz mit Downloads gut. Downloadjs verwenden die API für Blob- und HTML 5-Dateien unter der Haube:

{downloadjs (URL, Dateiname)}) />

* Es ist jsx / react-Syntax, kann aber in reinem HTML verwendet werden

Fügen Sie irgendwo zwischen Ihren <body>und </body>Tags eine Schaltfläche mit dem folgenden Code ein:

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

Das wird sicher funktionieren!

Eine andere Möglichkeit für den Fall, dass Sie eine komplexe URL haben, file.doc?foo=bar&jon=doebesteht darin, ein verstecktes Feld innerhalb des Formulars hinzuzufügen

<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>

inspiriert von @Cfreak Antwort, die nicht vollständig ist

Sie können Tags ohne Text, aber mit Link hinzufügen. und wenn Sie auf die Schaltfläche klicken, wie Sie sie im Code haben, führen Sie einfach die Funktion $ ("yourlinkclass"). click () aus.

Download-Attribut mach es

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

Wenn Sie das <a>Tag verwenden, vergessen Sie nicht, die gesamte URL zu verwenden, die zur Datei führt - dh:

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

Für mich funktioniert das Hinzufügen einer Schaltfläche anstelle eines Ankertextes sehr gut.

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

Nach den meisten Regeln ist es vielleicht nicht in Ordnung, aber es sieht ziemlich gut aus.