Gibt es einen Weg, um einen vorgeschlagenen Dateinamen anzugeben, wenn data: URI verwendet wird?

Question

Wenn Sie beispielsweise dem Link folgen:

data:application/octet-stream;base64,SGVsbG8=

Der Browser wird Sie auffordern, eine Datei herunterzuladen, die aus den in der Verknüpfung selbst als Base64 gespeicherten Daten besteht. Gibt es eine Möglichkeit, einen Standardnamen im Markup vorzuschlagen? Wenn nicht, gibt es eine JavaScript-Lösung?

Answer 1

Es gibt ein kleines Workaround-Skript auf Google Code, das für mich funktioniert hat:

http://code.google.com/p/download-data-uri/

Es fügt ein Formular mit den Daten hinzu, sendet es ab und entfernt dann das Formular wieder. Etwas trickreich, aber es hat für mich funktioniert. Erfordert jQuery.

Dieser Thread tauchte bei Google vor der Google Code-Seite auf, und ich dachte, es könnte hilfreich sein, den Link auch hier einzufügen.

Answer 2

Hier ist eine jQuery-Version, die auf Holf's Version basiert und mit Chrome und Firefox funktioniert, während seine Version anscheinend nur mit Chrome funktioniert. Es ist etwas seltsam, etwas zum Body hinzuzufügen, um dies zu tun, aber wenn jemand eine bessere Option hat, bin ich dafür.

var exportFileName = "export-" + filename;
$('', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].klicken().entfernen();

Answer 3

Dies funktioniert mit Firefox 43.0 (Ältere Versionen wurden nicht getestet):

dl.js:

function download() {
  var msg="Hallo Welt!";
  var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});

  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);

  window.location.href=a;
}

dl.html

    Test

Herunterladen

Wenn auf die Schaltfläche geklickt wird, wird eine Datei namens hello.bin zum Download angeboten. Der Trick besteht darin, File anstelle von Blob zu verwenden.

Referenz: https://developer.mozilla.org/de/docs/Web/API/File

Answer 4

(Diese Antwort wurde durch neuere Technologien überholt, wird jedoch aus historischem Interesse hier aufbewahrt.)

Es ist irgendwie hackisch, aber ich war schon einmal in der gleichen Situation. Ich habe eine Textdatei dynamisch in JavaScript generiert und wollte sie zum Download anbieten, indem ich sie mit dem data-URI codiere.

~~

Dies ist möglich mit geringen erheblichem Benutzereingriff. Generieren Sie einen Link [klicken Sie mit der rechten Maustaste auf mich und wählen Sie "Link speichern unter..." und speichern Sie sie als "beispiel.txt"](data:...). Wie gesagt, das ist unschön, aber es funktioniert, wenn Sie keine professionelle Lösung benötigen.

~~

Dies könnte weniger schmerzhaft gestaltet werden, indem man zunächst den Namen mit Flash in die Zwischenablage kopiert. Natürlich könnte man, wenn man sich erlaubt, Flash oder Java (jetzt mit immer weniger Browserunterstützung, glaube ich?) zu verwenden, wahrscheinlich einen anderen Weg finden, dies zu tun.

Answer 5

funktioniert für Linksklick und Rechtsklick -> Verknüpfung speichern unter..,

[

aber ![](..) funktioniert nicht für Rechtsklick -> Bild speichern unter.., "Download.jped" wird vorgeschlagen.

](..)

Wenn du beides kombinierst: [![](..)](..)

funktioniert es für Linksklick, Rechtsklick -> Verknüpfung speichern unter.., Rechtsklick -> Bild speichern unter..

Du musst die Daten-URI zweimal schreiben (href und src), daher ist es bei großen Bilddateien besser, die URI mit JavaScript zu kopieren.

getestet mit Chrome/Edge 88