Wie man einen Dateidownload auslöst, wenn man auf eine HTML-Schaltfläche oder JavaScript klickt

Question

Dies ist verrückt, aber ich weiß nicht, wie man das macht, und aufgrund der Häufigkeit der Wörter ist es schwierig, das zu finden, was ich brauche, auf Suchmaschinen. Ich denke, das sollte eine einfache Frage sein.

Ich möchte einen einfachen Dateidownload, der das Gleiche macht wie dies:

Download!

Aber ich möchte einen HTML-Button verwenden, z.B. einen von diesen:

Download!

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

$("#fileRequest").click(function(){ /* Code zum Herunterladen? */ });

Ich suche definitiv nicht nach einer Möglichkeit, einen Anchor zu erstellen, der wie ein Button aussieht, Backend-Skripte zu verwenden oder mit Server-Headern oder MIME-Typen herumzuspielen.

Answer 1

Sie können es mit "Trick" mit unsichtbarem iframe machen. Wenn Sie "src" darauf setzen, reagiert der Browser, als ob Sie auf einen Link mit demselben "href" klicken würden. Im Gegensatz zur Lösung mit dem Formular ermöglicht es Ihnen, zusätzliche Logik einzubinden, z.B. die Aktivierung des Downloads nach Ablauf einer Zeitüberschreitung, wenn bestimmte Bedingungen erfüllt sind usw.

Es ist auch sehr still, es gibt kein Blinken eines neuen Fensters/Tab wie bei der Verwendung von window.open.

HTML:

Javascript:

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

Answer 2

Bootstrap Version

  Download

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

Answer 3

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

Herunterladen!

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);
}

Answer 4

Sie können den Download-Link ausblenden und den Button darauf klicken lassen.

Herunterladen!

Answer 5

Was ist mit: