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 einen Download mit dem HTML5 download Attribut auslösen.

Download

Wo:

• path_to_file ist ein Pfad, der zu einer URL auf dem gleichen Ursprung auflöst. Das bedeutet, die Seite und die Datei müssen die gleiche Domäne, Subdomain, das gleiche Protokoll (HTTP vs. HTTPS) und den gleichen Port (falls angegeben) teilen. Ausnahmen sind blob: und data: (die immer funktionieren) und file: (die nie funktioniert).
• proposed_file_name ist der Dateiname zum Speichern. Wenn er leer ist, verwendet der Browser standardmäßig den Namen der Datei.

Dokumentation: MDN, HTML-Standard zum Herunterladen, HTML-Standard zu download, CanIUse

Answer 2

Für den Button kannst du Folgendes tun:

   Herunterladen!

Answer 3

Ein einfache JS-Lösung:

function download(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

Answer 4

HTML:

Herunterladen!

Answer 5

Mit jQuery:

$("#fileRequest").click(function() {
    // Hoffentlich setzt der Server Content-Disposition: Anhang!
    window.location = 'file.doc';
});