Wie kann man eine Datei im Speicher erstellen, die der Benutzer herunterladen kann, aber nicht über den Server?

Question

Gibt es eine Möglichkeit, eine Textdatei auf der Client-Seite zu erstellen und den Benutzer aufzufordern, sie herunterzuladen, ohne dass eine Interaktion mit dem Server erforderlich ist? Ich weiß, dass ich nicht direkt auf den Rechner des Nutzers schreiben kann (Sicherheit und so), aber kann ich eine Datei erstellen und ihn auffordern, sie zu speichern?

Answer 1

Einfache Lösung für HTML5-fähige Browser...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Verwendung

download('test.txt', 'Hello world!');

Answer 2

Sie können Daten-URIs verwenden. Die Browserunterstützung variiert; siehe Wikipedia . Beispiel:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Der Octet-Stream soll eine Download-Aufforderung erzwingen. Andernfalls wird sie wahrscheinlich im Browser geöffnet.

Für CSV können Sie verwenden:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Versuchen Sie die jsFiddle-Demo .

Answer 3

Ein Beispiel für IE 10+, Firefox und Chrome (und ohne jQuery oder eine andere Bibliothek):

function save(filename, data) {
    const blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        const elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

Beachten Sie, dass Sie je nach Situation auch die folgende Funktion aufrufen können URL.revokeObjectURL nach dem Entfernen elem . Laut den Unterlagen für URL.createObjectURL :

Jedes Mal, wenn Sie createObjectURL() aufrufen, wird eine neue Objekt-URL erstellt, auch wenn Sie bereits eine für dasselbe Objekt erstellt haben. Jede dieser URLs muss durch den Aufruf von URL.revokeObjectURL() freigegeben werden, wenn Sie sie nicht mehr benötigen. Browser geben sie automatisch frei, wenn das Dokument entladen wird; für eine optimale Leistung und Speichernutzung sollten Sie sie jedoch explizit freigeben, wenn es sichere Zeiten gibt, in denen Sie sie entladen können.

Answer 4

Alle oben genannten Beispiele funktionieren problemlos in Chrome und IE, aber nicht in Firefox. Bitte erwägen Sie, einen Anker an den Textkörper anzuhängen und ihn nach dem Klick zu entfernen.

var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a);
a.click();

// Remove anchor from body
document.body.removeChild(a);

Answer 5

Ich benutze gerne FileSaver.js . Seine Kompatibilität ist ziemlich gut (IE10+ und alles andere), und es ist sehr einfach zu bedienen:

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");