HTML5/JavaScript verwenden, um eine Datei zu erzeugen und zu speichern

Question

Ich habe in letzter Zeit mit WebGL herumgespielt und einen Collada-Reader zum Laufen gebracht. Das Problem ist, dass es ziemlich langsam ist (Collada ist ein sehr ausführliches Format), also werde ich anfangen, Dateien in ein einfacheres Format zu konvertieren (wahrscheinlich JSON). Ich habe bereits den Code, um die Datei in JavaScript zu parsen, also kann ich ihn auch als meinen Exporter verwenden! Das Problem ist das Speichern.

Jetzt weiß ich, dass ich die Datei analysieren, das Ergebnis an den Server senden und den Browser veranlassen kann, die Datei vom Server als Download zurückzufordern. Aber in Wirklichkeit hat der Server nichts mit diesem speziellen Prozess zu tun, warum sollte er also involviert werden? Ich habe den Inhalt der gewünschten Datei bereits im Speicher. Gibt es eine Möglichkeit, dem Benutzer einen Download mit reinem JavaScript zu präsentieren? (Ich bezweifle es, aber ich könnte genauso gut fragen...)

Und um das klarzustellen: Ich versuche nicht, ohne Wissen des Benutzers auf das Dateisystem zuzugreifen! Der Benutzer gibt eine Datei an (wahrscheinlich per Drag & Drop), das Skript wandelt die Datei im Speicher um, und der Benutzer wird aufgefordert, das Ergebnis herunterzuladen. All dies sollten "sichere" Aktivitäten sein, soweit der Browser betroffen ist.

[EDIT]: Ich habe es nicht im Voraus erwähnt, also sind die Poster, die mit "Flash" geantwortet haben, berechtigt, aber ein Teil dessen, was ich tue, ist ein Versuch, hervorzuheben, was mit reinem HTML5 gemacht werden kann... also ist Flash in meinem Fall ausgeschlossen. (Obwohl es eine vollkommen gültige Antwort für jeden ist, der eine "echte" Webanwendung macht.) Da dies der Fall ist, sieht es so aus, als hätte ich kein Glück, es sei denn, ich möchte den Server einbeziehen. Trotzdem vielen Dank!

Answer 1

Werfen Sie einen Blick auf Doug Neiner's Downloadify eine Flash-basierte JavaScript-Schnittstelle, die dies ermöglicht.

Downloadify ist eine winzige JavaScript- und Flash-Bibliothek, die die Erzeugung und Speicherung von Dateien im Browser ohne Serverinteraktion ermöglicht.

Answer 2

Einfache Lösung!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Funktioniert in allen modernen Browsern.

Answer 3

Ich habe FileSaver verwendet ( https://github.com/eligrey/FileSaver.js ) und es funktioniert einwandfrei.
Ich habe zum Beispiel diese Funktion verwendet, um die auf einer Seite angezeigten Protokolle zu exportieren.
Sie müssen ein Array für die Instanziierung der Blob übergeben, so dass ich nur vielleicht nicht schreiben dies der richtige Weg, aber es funktioniert für mich.
Nur für den Fall, seien Sie vorsichtig mit dem Ersetzen: Dies ist die Syntax, um dies global zu machen, sonst wird es nur die erste ersetzen, die er trifft.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

Answer 4

Sie können eine Daten URI . Allerdings gibt es browserspezifische Einschränkungen.

Answer 5

Versuchen Sie

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Wenn Sie binäre Daten herunterladen möchten, schauen Sie unter aquí

Update

2020.06.14 Ich aktualisiere Chrome auf 83.0 und höher SO Snippet nicht mehr funktioniert (aufgrund von Sandkasten-Sicherheit Einschränkungen) - aber JSFiddle-Version funktioniert - aquí