Gibt es eine Möglichkeit, einen vorgeschlagenen Dateinamen anzugeben, wenn data: URI verwendet wird?

Lesezeit: 7 Minuten

Wenn Sie zum Beispiel dem Link folgen:

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

Der Browser fordert Sie auf, eine Datei herunterzuladen, die aus den als base64 im Hyperlink selbst gespeicherten Daten besteht. Gibt es eine Möglichkeit, einen Standardnamen im Markup vorzuschlagen? Wenn nicht, gibt es eine JavaScript-Lösung?

  • möglicherweise nichts mit diesem Problem zu tun, aber ich schlage vor, blobs & URL.createObjectURL zu verwenden, wenn dies kein Hindernis für einen Server oder einen alten Browser ist

    – Endlos

    20. November 2015 um 20:48 Uhr

  • Einige Browser unterstützen den optionalen Parameter „name“ des Medientyps: data:application/pdf;name=document.pdf;base64,BASE64_DATA_ENCODED

    – mems

    3. April 2017 um 13:24 Uhr

  • Ich hatte das Problem mit Firefox pdf.js, das in einigen Fällen dazu neigt, zu hängen, wenn es keinen Dateinamen aus der Daten-URI extrahieren kann. siehe stackoverflow.com/questions/45585921/…

    – Bernhard

    9. August 2017 um 8:56 Uhr


  • @mems Welche Browser unterstützen den “name”-Parameter? Können Sie mir eine Referenzdokumentation nennen? (mein google-fu hat mich im Stich gelassen).

    – Das AddonDepot

    25. September 2018 um 1:46 Uhr

  • @DimuDesigns Damals zumindest Firefox. Es sieht so aus, als wäre es nicht mehr der Fall. Es bezieht sich auf den MIME-Content-Type (!= Content-Disposition) “Name”-Parameter (nicht in RFC?)

    – mems

    27. September 2018 um 14:29 Uhr

Gibt es eine Moglichkeit einen vorgeschlagenen Dateinamen anzugeben wenn data
Dan Fabulich

Verwenden Sie die download Attribut:

<a download='FileName' href="https://stackoverflow.com/questions/283956/your_url">

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

  • @BioDesign: Es funktioniert sogar mit data:URIs in Chrom. Sehen: jsfiddle.net/pYpqW

    – Sinnvoll

    17. Januar 2012 um 5:36 Uhr

  • aber du kannst es nicht mit machen window.location.replace. wenn Sie zB eine data:uri oder eine generiert von erstellen möchten window.URL.createObjectURLund laden Sie das als Datei herunter, Sie müssen ein erstellen und darauf klicken: jsfiddle.net/flyingsheep/wpQtH (Nein, $(...).click() geht nicht)

    – fliegende Schafe

    16. März 2012 um 18:31 Uhr


  • Nur wenn alle Browser wie Chrome wären… [sigh]

    – Strassenlicht

    14. November 2012 um 13:25 Uhr

  • @fliegendesschaf $('<a href="data:text/plain,Test" download="test.txt">')[0].click() scheint hier gut zu funktionieren (Chrome 23) (Anmerkung: I verwendet den Eingeborenen click Methode, nicht die von jQuery). Demo: jsfiddle.net/2zsRW

    – Rob W

    6. Dezember 2012 um 12:34 Uhr

  • @flyingsheep es scheint, dass sie in Firefox eine Richtlinie des gleichen Ursprungs durchsetzen “In Firefox 20 wird dieses Attribut nur für Links zu Ressourcen mit demselben Ursprung berücksichtigt.” developer.mozilla.org/en-US/docs/Web/HTML/Element/a In meinen Tests hat Chrome diese Einschränkung nicht.

    – William Dennis

    19. Dezember 2013 um 6:17 Uhr


Chrome macht das heutzutage sehr einfach:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href="https://stackoverflow.com/questions/283956/data:," + fileContents;
    link.click();
}

  • Idk, worüber all diese anderen Antworten sprechen, funktionierte beim ersten Versuch in Chrome 30.

    – Michael J. Calkins

    23. Oktober 2013 um 14:43 Uhr

  • Das tut es jetzt, aber es war nicht immer so einfach. Viele dieser Antworten stammen von vor Jahren. Und sie funktionieren auch für andere Browser.

    – Holf

    26. Oktober 2013 um 10:09 Uhr

  • Beziehen auf http://caniuse.com/#feat=download für eine vollständige Liste der Browserkompatibilität.

    – tixastronauta

    13. Februar 2014 um 10:24 Uhr

  • @tixastronauta: Trotz der Informationen auf dieser Seite funktioniert es nicht in meinem Firefox 44. Funktioniert gut in Chrome. 48

    – Luis A. Florit

    17. Februar 2016 um 13:43 Uhr


  • Hallo @Holf, gibt es eine Möglichkeit, auch den Dateityp oder die Erweiterung hinzuzufügen, oder ist es genauso einfach wie spceficy es als Dateiname?

    – Fraccier

    31. Mai 2016 um 14:57 Uhr

1646312528 193 Gibt es eine Moglichkeit einen vorgeschlagenen Dateinamen anzugeben wenn data
Fregant

Nur HTML: benutze die download Attribut:

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

Nur Javascript: Mit diesem Code können Sie beliebige Daten-URIs speichern:

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

    //Firefox requires the link to be in the body
    document.body.appendChild(link);
    
    //simulate click
    link.click();

    //remove the link when done
    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+ verwendet den angegebenen Dateinamen.

IE11, Edge 12 und Safari 9 (welcher unterstütze die nicht download Attribut) lädt die Datei mit ihrem Standardnamen herunter oder sie zeigen es einfach an in einem neuen Tab, wenn es sich um einen unterstützten Dateityp handelt: Bilder, Videos, Audiodateien, …

  • Beide Demos funktionieren gut für mich in Chrome 38 (aber sie sollten in Chrome 14+ funktionieren)

    – fregante

    7. Oktober 2014 um 18:09 Uhr

  • Für eine vollständigere Lösung empfehle ich die Verwendung von downloadjs auf npm

    – fregante

    28. September 2016 um 16:43 Uhr

  • Es funktioniert für mich, aber die Browserseite wird danach aktualisiert. Frage mich, wie man das verhindern kann?

    Benutzer6269864

    18. November 2016 um 5:46 Uhr

  • Funktioniert nicht in Chrome für Dateigrößen > 2 MB aufgrund Beschränkung durch Chrome stackoverflow.com/questions/695151/…

    – Pranav Singh

    6. Februar 2017 um 11:12 Uhr

  • Die Grenze gehört zu den data: URI, was in der Frage erwähnt wird. Diese Antwort funktioniert auch mit Blobs und was auch immer einen URI hat

    – fregante

    6. Februar 2017 um 13:27 Uhr


1646312529 973 Gibt es eine Moglichkeit einen vorgeschlagenen Dateinamen anzugeben wenn data
Alnitak

Entsprechend RFC 2397nein, gibt es nicht.

Es scheint auch keine zu geben Attribut des <a> Element, das Sie entweder verwenden können.

HTML5 hat jedoch nachträglich die eingeführt download Attribut auf der <a> -Element, obwohl die Unterstützung zum Zeitpunkt des Schreibens nicht universell ist (z. B. keine MSIE-Unterstützung)

Gibt es eine Moglichkeit einen vorgeschlagenen Dateinamen anzugeben wenn data
sherpya

Ich habe ein bisschen in Firefox-Quellen in network/protocol/data/nsDataHandler.cpp gesucht

Der Datenhandler analysiert nur Inhalt/Typ und Zeichensatz und prüft, ob der String “;base64” enthält

der RFC gibt keinen Dateinamen an und zumindest Firefox verarbeitet keinen Dateinamen dafür, der Code generiert einen zufälligen Namen plus “.part”

Ich habe auch Firefox-Log ü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 Mozilla-Quellen ansehen möchten:

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

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

wie in diesem thread bemerkt hat html5 download attribut, es funktioniert auch auf firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

  • Cool! Obwohl ich nicht unbedingt zustimme, dass Firefox die ultimative Autorität für das ist, was existiert. 🙂

    – Gleno

    5. Juni 2011 um 10:30 Uhr

Das folgende Javascript-Snippet funktioniert in Chrome, indem es das neue „download“-Attribut von Links verwendet und einen Klick simuliert.

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

Und das folgende Beispiel zeigt seine Verwendung:

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")

  • Cool! Obwohl ich nicht unbedingt zustimme, dass Firefox die ultimative Autorität für das ist, was existiert. 🙂

    – Gleno

    5. Juni 2011 um 10:30 Uhr

Gibt es eine Moglichkeit einen vorgeschlagenen Dateinamen anzugeben wenn data
Leichtigkeitsrennen im Orbit

Nein.

Der ganze Zweck ist, dass es sich um einen Datenstrom handelt, nicht um eine Datei. Die Datenquelle sollte keine Kenntnis davon haben, dass der Benutzeragent sie als Datei behandelt … und das tut sie auch nicht.

  • Der Zweck von data: ist, einen Block von zu fudge intern Daten in das URL-Format, ohne dass Sie dies tun müssen lesen es aus einer protokollbasierten Quelle. Der Link in der Antwort von @silex zeigt, dass die Möglichkeit besteht, einen bevorzugten Namen vorzuschlagen schreiben Es wird als nützlich angesehen, auch wenn es noch nicht implementiert ist.

    – Alnitak

    5. Juni 2011 um 9:27 Uhr

  • @Alnitak: Nützlich? Absolut. Technisch angemessen? Immer noch nicht überzeugt. 🙂

    – Leichtigkeitsrennen im Orbit

    5. Juni 2011 um 20:21 Uhr

  • @Tomalak Betrachten Sie den Unterschied zwischen dem Laden und Speichern der Daten – nur weil ein Blob in einer Datenzeile inline codiert ist: URL bedeutet nicht, dass es keinen bevorzugten Namen zum Speichern haben sollte.

    – Alnitak

    5. Juni 2011 um 20:26 Uhr

  • Aber Ihre Zeile über den “gesamten Zweck” ist falsch. data: wurde speziell erfunden, um (klein) in der Reihe Inhalt in einem zusammengeflickten URL-Format erscheinen, sodass er von Dingen wie Bild-Tags ohne separate HTTP-Anforderung verwendet werden kann. HTML sagt den Inhalt von a img src -Attribut muss eine URL sein, also hat RFC 2397 das erstellt. Es gibt keine “Datenquelle”.

    – Alnitak

    5. Juni 2011 um 22:14 Uhr

  • @Alnitak: Genau. Es gibt keine Datenquelle. Es gibt keinen Kontext. Der URI ist die Daten.

    – Leichtigkeitsrennen im Orbit

    5. Juni 2011 um 22:22 Uhr

923640cookie-checkGibt es eine Möglichkeit, einen vorgeschlagenen Dateinamen anzugeben, wenn data: URI verwendet wird?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy