Heim >Web-Frontend >js-Tutorial >Wie kann ich Dateien mit benutzerdefinierten Dateinamen mithilfe von Daten-URIs herunterladen?

Wie kann ich Dateien mit benutzerdefinierten Dateinamen mithilfe von Daten-URIs herunterladen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-28 05:22:17215Durchsuche

How Can I Download Files with Custom Filenames Using Data URIs?

Herunterladen von Dateien mit benutzerdefinierten Dateinamen mithilfe von Daten-URIs

Daten-URIs bieten eine bequeme Möglichkeit, Daten in Webseiten einzubetten. Beim Herunterladen von Daten von einem Daten-URI fordern Browser den Benutzer jedoch normalerweise zur Eingabe eines Dateinamens auf. Ist es möglich, einen vorgeschlagenen Dateinamen im Markup bereitzustellen oder eine JavaScript-Lösung zu implementieren?

Das Download-Attribut

Moderne Browser unterstützen das „Download“-Attribut für Anker () Elemente. Mit diesem Attribut können Sie einen vorgeschlagenen Dateinamen für die heruntergeladene Datei angeben.

<a download="FileName" href="data:application/octet-stream;base64,SGVsbG8=">
  Download
</a>

Diese Lösung funktioniert auf Chrome, Firefox, Edge, Opera, Desktop Safari 10, iOS Safari 13, aber nicht IE11.

JavaScript-Lösung

Wenn das „Download“-Attribut nicht unterstützt wird, können Sie ein JavaScript verwenden Lösung:

const link = document.createElement("a");
link.setAttribute("href", "data:application/octet-stream;base64,SGVsbG8=");
link.setAttribute("download", "FileName");
link.click();

Dieser Code erstellt ein Ankerelement, legt die Attribute „href“ und „download“ fest und simuliert dann ein Klickereignis, um den Download auszulösen.

Das obige ist der detaillierte Inhalt vonWie kann ich Dateien mit benutzerdefinierten Dateinamen mithilfe von Daten-URIs herunterladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn