Wie löst man Dateidownloads mithilfe von HTML-Schaltflächen oder JavaScript aus?

Datei-Downloads über HTML-Schaltflächen oder JavaScript auslösen

Bei der Webentwicklung ist es oft notwendig, Benutzern die Möglichkeit zu geben, Dateien herunterzuladen. Während das traditionelle HTML Da zu diesem Zweck häufig ein Ankertag mit einem href-Attribut verwendet wird, kann es vorkommen, dass Sie den Download über eine Schaltfläche oder JavaScript auslösen möchten.

Methode 1: HTML5-Download-Attribut verwenden

Um einen Dateidownload über eine HTML-Schaltfläche auszulösen, können Sie das HTML5-Download-Attribut verwenden. Dieses Attribut gibt den Dateinamen an, der beim Speichern der Datei verwendet werden soll, und funktioniert sowohl mit und Elemente.

<button type="button" download="file.doc">Download!</button>

Methode 2: Download über JavaScript auslösen

Sie können einen Dateidownload auch programmgesteuert mit JavaScript auslösen. Diese Methode erfordert jedoch einen etwas anderen Ansatz. Anstatt das href-Attribut zu verwenden, können Sie die location.href-Eigenschaft des Fensterobjekts auf die URL der Datei festlegen und den Dateinamen zum Download-Attribut des a-Elements hinzufügen.

$("#fileRequest").click(function() {
  location.href = "file.doc";
  $("a").attr("download", "proposed_file_name");
});

Zusätzliche Überlegungen

• Denken Sie daran, dass der Pfad der Datei denselben Ursprung wie die Seite haben muss (d. h. dieselbe Domäne teilen, Subdomain, Protokoll und Port).
• Wenn der Dateiname nicht angegeben ist, wird der Standarddateiname der heruntergeladenen Datei verwendet.
• Das Download-Attribut wird jedoch von den meisten modernen Browsern unterstützt sein Verhalten kann leicht variieren.

Das obige ist der detaillierte Inhalt vonWie löst man Dateidownloads mithilfe von HTML-Schaltflächen oder JavaScript aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!