it-swarm.com.de

Gibt es eine Möglichkeit, bei der Verwendung von Daten einen vorgeschlagenen Dateinamen anzugeben: URI?

Wenn Sie zum Beispiel dem Link folgen:

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

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

214
MontyGomery

Verwenden Sie das download Attribut:

<a download='FileName' href='your_url'>

Live-Beispiel auf html5-demos.appspot.com/... .

Funktioniert derzeit Chrome, Firefox, Edge, Opera und Desktop Safari, jedoch nicht iOS Safari oder IE11.

146
Dan Fabulich

Chrome macht dies heutzutage sehr einfach:

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

Nur HTML: Verwenden Sie das download -Attribut:

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

Nur Javascript: Sie können jede 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 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 + verwenden den angegebenen Dateinamen.

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


Wenn Sie eine bessere Kompatibilität benötigen jetzt, verwenden Sie das Flash-basierte Downloadify als Fallback.

45
fregante

Laut RFC 2397 gibt es keine.

Es scheint auch kein Attribut des Elements <a> Zu geben, das Sie verwenden können.

HTML5 hat jedoch später das Attribut download für das Element <a> Eingeführt, obwohl die Unterstützung zum Zeitpunkt des Schreibens nicht universell ist (z. B. keine MSIE-Unterstützung).

39
Alnitak

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

der Datenhandler analysiert nur Inhalt/Typ und Zeichensatz und prüft, ob die Zeichenfolge "; base64" enthält

der rfc spezifiziert keinen Dateinamen und zumindest Firefox behandelt 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 das Attribut download und funktioniert auch unter Firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html) # attr-hyperlink-download

21
sherpya

Das folgende JavaScript-Snippet funktioniert in Chrome durch Verwenden des neuen Attributs "Download" von Links und Simulieren eines Klicks.

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

Das folgende Beispiel zeigt die Verwendung:

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

Nein.

Der gesamte Zweck besteht darin, dass es sich um einen Datenstrom handelt, nicht um eine Datei. Die Datenquelle sollte keine Kenntnis über den Benutzeragenten haben, der sie als Datei behandelt ... und das tut er auch nicht.

sie können dem Ankerelement ein Download-Attribut hinzufügen.

probe:

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>
8
cuixiping

Mit Servicemitarbeiter ist dies im wahrsten Sinne des Wortes endlich möglich.

  1. Erstellen Sie eine gefälschte URL. Zum Beispiel /saveAs/myPrettyName.jpg
  2. Verwenden Sie URL in <a href, <img src, Window.open (url), absolut alles, was mit einer "echten" URL gemacht werden kann.
  3. Fangen Sie innerhalb des Workers das Abrufereignis ab und antworten Sie mit den richtigen Daten.

Der Browser schlägt jetzt myPrettyName.jpg vor, auch wenn der Benutzer die Datei in einem neuen Tab öffnet und versucht, sie dort zu speichern. Es wird genau so sein, als ob die Datei vom Server gekommen wäre.

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});
5
Adria

Schauen Sie sich diesen Link an: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Zitat:

Es funktioniert sogar (wie in, verursacht kein Problem) mit; base64 am Ende
so (zumindest in Opera)):

data: text/plain; charset = utf-8; headers = Inhaltsdisposition% 3A% 20attachment% 3B% 20filename% 3D% 22with% 20spaces.txt% 22% 0D% 0AContent-Language % 3A% 20en; base64,4oiaDQo% 3D

Es gibt auch einige Informationen in den restlichen Nachrichten der Diskussion.

5
silex

Es gibt ein kleines Umgehungsskript für Google Code, das für mich funktioniert hat:

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

Es fügt ein Formular mit den darin enthaltenen Daten hinzu, sendet es und entfernt das Formular dann wieder. Hacky, aber es hat den Job für mich gemacht. Benötigt jQuery.

Dieser Thread wurde in Google vor der Google-Codepage angezeigt, und ich dachte, es wäre hilfreich, den Link auch hier zu haben.

4
Fabian B.

Hier ist eine jQuery-Version, die auf Holfs Version basiert und mit Chrome und Firefox funktioniert, während seine Version nur mit Chrome zu funktionieren scheint Jemand hat eine bessere Option, ich bin alles dafür.

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();
3
kgividen

Es ist irgendwie verrückt, aber ich war schon einmal in der gleichen Situation. Ich generierte dynamisch eine Textdatei in Javascript und wollte sie zum Download bereitstellen, indem ich sie mit der Daten-URI verschlüsselte.

Dies ist möglich mit geringerhauptbenutzereingriff. Einen Link generieren <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Wie gesagt, das ist unelegant, aber es funktioniert, wenn Sie keine professionelle Lösung benötigen.

Dies könnte weniger schmerzhaft sein, wenn Sie den Namen mit Flash zuerst in die Zwischenablage kopieren. Natürlich, wenn Sie sich Flash oder Java (jetzt mit immer weniger Browserunterstützung, denke ich?) Zulassen, könnten Sie wahrscheinlich einen anderen Weg finden, dies zu tun.

3
ninjagecko

Dieser funktioniert mit Firefox 43.0 (älter nicht getestet):

dl.js:

function download() {
  var msg="Hello world!";
  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

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="dl.js"></script>
</head>

<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>

Wenn Sie auf die Schaltfläche klicken, wird eine Datei mit dem Namen hello.bin zum Download angeboten. Der Trick ist, File anstelle von Blob zu verwenden.

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

2
NeutronenStern
var isIE = /*@[email protected]*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
    {
            var fileData = ['\ufeff' + uri];
            var blobObject = new Blob(fileData);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
    }
    else //chrome
    {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
         window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
            fs.root.getFile(fileName, { create: true }, function (fileEntry) { 
                fileEntry.createWriter(function (fileWriter) {
                    var fileData = ['\ufeff' + uri];
                    var blob = new Blob(fileData);
                    fileWriter.addEventListener("writeend", function () {
                        var fileUrl = fileEntry.toURL();
                        var link = document.createElement('a');
                        link.href = fileUrl;
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }, false);
                    fileWriter.write(blob);
                }, function () { });
            }, function () { });
         }, function () { });
    }
0
Sushama Pradhan