Wie kann ich Dateidownloads in HTML/JavaScript auslösen, ohne Anker oder serverseitigen Code zu verwenden?

So lösen Sie Dateidownloads mithilfe von HTML-Schaltflächen oder JavaScript aus

Frage: Wie können Sie einen Dateidownload auslösen, wenn Sie auf eine HTML-Schaltfläche klicken oder diese ausführen? JavaScript ohne die Verwendung von Ankern, Back-End-Skripten oder die Änderung von Server-Headern?

HTML Methode:

Das HTML5-Download-Attribut ermöglicht Datei-Downloads, wenn es auf ein Anker-Tag () angewendet wird. Geben Sie den Pfad zur Datei und den vorgeschlagenen Dateinamen wie folgt an:

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

Einschränkungen:

Beachten Sie, dass sich die Datei am selben Ursprung wie die Seite befinden muss (d. h. dieselbe Domäne, Subdomäne, dasselbe Protokoll und denselben Port). Ausnahmen sind blob:, data: und file:. Lassen Sie den vorgeschlagenen_Dateinamen leer, um den tatsächlichen Namen der Datei zu verwenden.

JavaScript-Methode:

Um einen Download über JavaScript auszulösen, können Sie den folgenden Code verwenden:

const downloadElement = document.getElementById("file-request");
downloadElement.addEventListener("click", () => {
    const link = document.createElement("a");
    link.setAttribute("href", "path_to_file");
    link.setAttribute("download", "proposed_file_name");
    link.click();
});

Dieser Code erstellt ein verstecktes Ankerelement, legt dessen Download-Attribute fest und simuliert einen Klick darauf, um den Download zu starten herunterladen.

Zusätzliche Hinweise:

• Stellen Sie sicher, dass Ihr Server ordnungsgemäß für die Verarbeitung von Dateidownloads konfiguriert ist.
• Ausführlichere Informationen finden Sie unter Siehe die MDN-Dokumentation zum Herunterladen, HTML-Standard zum Herunterladen, HTML-Standard zum Download-Attribut und CanIUse für Browserkompatibilität.

Das obige ist der detaillierte Inhalt vonWie kann ich Dateidownloads in HTML/JavaScript auslösen, ohne Anker oder serverseitigen Code zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!