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

Verwenden Sie das download Attribut:

Das download Attribut funktioniert in Chrome, Firefox, Edge, Opera, Desktop-Safari 10+, iOS Safari 13+ und nicht in IE11.

Answer 2

Chrome macht das heutzutage sehr einfach:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

Answer 3

Nur HTML: Verwenden Sie das download Attribut:

Transparentes png herunterladen

---

Nur Javascript: Sie können jeden Daten-URI mit diesem Code speichern:

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox benötigt, dass der Link im Body ist
    document.body.appendChild(link);

    //Klick simulieren
    link.click();

    //Link entfernen, wenn fertig
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome, Firefox und Edge 13+ verwenden den angegebenen Dateinamen.

IE11, Edge 12 und Safari 9 (die das download Attribut nicht unterstützen) werden die Datei mit ihrem Standardnamen herunterladen oder sie einfach anzeigen in einem neuen Tab, wenn es sich um einen unterstützten Dateityp handelt: Bilder, Videos, Audiodateien, …

Answer 4

Laut RFC 2397 gibt es das nicht.

Es scheint auch kein Attribut des -Elements zu geben, das du verwenden kannst.

Allerdings hat HTML5 später das download-Attribut auf dem -Element eingeführt, obwohl zum Zeitpunkt des Schreibens die Unterstützung nicht universell ist (keine Unterstützung bei MSIE, zum Beispiel)

Answer 5

Ich habe ein wenig in den Firefox-Quellen in netwerk/protocol/data/nsDataHandler.cpp geschaut

Der Data Handler parst nur content/type und charset und prüft, ob ";base64" im String enthalten ist

Das RFC spezifiziert keinen Dateinamen und zumindest behandelt Firefox keinen Dateinamen dafür. Der Code generiert einen zufälligen Namen plus ".part"

Ich habe auch das Firefox-Protokoll überprüft

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

Interessante Dateien, wenn Sie sich die Mozilla-Quellen ansehen möchten:

data-URI-Handler: netwerk/protocol/data/nsDataHandler.cpp
wo Mozilla den Dateinamen entscheidet: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad-String im Protokoll: docshell/base/nsDocShell.cpp

Ich denke, Sie können jetzt aufhören, nach einer Lösung zu suchen, denn ich vermute, dass es keine gibt :)

wie in diesem Thread festgestellt wurde, hat html5 das download-Attribut, es funktioniert auch in Firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download