Gibt es eine Möglichkeit, einen vorgeschlagenen Dateinamen anzugeben, wenn Daten verwendet werden: 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?

Verwenden Sie das downloadAttribut:

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

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

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

Chrome macht dies heutzutage sehr einfach:

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

Nur HTML: Verwenden Sie das downloadAttribut:

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

Nur Javascript: Mit diesem Code können Sie jeden Daten-URI 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 downloadAttribut nicht unterstützen ) laden die Datei mit ihrem Standardnamen herunter oder zeigen sie einfach auf einer neuen Registerkarte an, wenn es sich um einen unterstützten Dateityp handelt: Bilder, Videos, Audiodateien ,…

Laut RFC 2397 gibt es keine.

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

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

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 gibt keinen Dateinamen an und zumindest Firefox verarbeitet 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 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 vorerst aufhören, nach einer Lösung zu suchen, weil ich vermute, dass es keine gibt :)

Wie in diesem Thread bemerkt, hat HTML5 ein downloadAttribut, es funktioniert auch unter Firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

Das folgende Javascript-Snippet funktioniert in Chrome, indem das neue Download-Attribut von Links verwendet und ein Klick simuliert wird.

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")

Nein.

Der gesamte Zweck besteht darin, dass es sich um einen Datenstrom handelt, nicht um eine Datei. Die Datenquelle sollte keine Kenntnisse über den Benutzeragenten haben, der sie als Datei behandelt ... und dies ist nicht der Fall.

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

Stichprobe:

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

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
wie folgt (zumindest in Opera):

Daten: Text / Klartext; Zeichensatz = utf-8; Header = Inhaltsdisposition% 3A% 20Anhang% 3B% 20Dateiname% 3D% 22mit% 20spaces.txt% 22% 0D% 0AContent-Language% 3A% 20en; base64,4oiaDQo% 3D

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

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

1. Erstellen Sie eine gefälschte URL. Zum Beispiel /saveAs/myPrettyName.jpg
2. Verwenden Sie die URL in <a href, <img srcwindow.open (url), absolut alles, was mit einer "echten" URL möglich ist.
3. Fangen Sie im Worker 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 );
    }
});

Es gibt ein kleines Problemumgehungsskript in 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 erneut. 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 könnte hilfreich sein, den Link auch hier zu haben.

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. Es ist ein wenig seltsam, dem Körper etwas hinzuzufügen, um dies zu tun, aber wenn jemand eine bessere Option hat, bin ich 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();

Es ist irgendwie hackisch, aber ich war schon einmal in der gleichen Situation. Ich habe dynamisch eine Textdatei in Javascript generiert und wollte sie zum Download bereitstellen, indem ich sie mit dem Daten-URI codierte.

Dies ist mit geringfügigen größeren Benutzereingriffen möglich . Generieren Sie einen Link <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 zuerst mit Flash in die Zwischenablage kopieren. Wenn Sie sich Flash oder Java erlauben lassen (jetzt mit immer weniger Browser-Unterstützung, denke ich?), Könnten Sie wahrscheinlich einen anderen Weg finden, dies zu tun.

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. Trick ist, Datei anstelle von Blob zu verwenden .

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

var isIE = /*@cc_on!@*/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 () { });
    }

Sie können dies tatsächlich in Chrome und FireFox erreichen.

Versuchen Sie die folgende URL, um den verwendeten Code herunterzuladen.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==