Erstellen und Speichern einer Datei mit JavaScript

Question

Ich habe Daten, die ich in eine Datei schreiben möchte, und öffne ein Dateidialogfeld, in dem der Benutzer auswählen kann, wo er die Datei speichern möchte. Es wäre toll, wenn es in allen Browsern funktionieren würde, aber es muss in Chrome funktionieren. Ich möchte dies alles client-side tun.

Im Grunde möchte ich wissen, was ich in diese Funktion eingeben soll:

saveFile: function(data)
{
}

Die Funktion nimmt Daten auf, lässt den Benutzer einen Speicherort für die Datei auswählen und erstellt an diesem Ort eine Datei mit diesen Daten.

Die Verwendung von HTML ist auch in Ordnung, wenn das hilft.

Answer 1

function SaveBlobAs(blob, file_name) {
    if (typeof navigator.msSaveBlob == "function")
        return navigator.msSaveBlob(blob, file_name);

    var saver = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    var blobURL = saver.href = URL.createObjectURL(blob), 
        body = document.body;

    saver.download = file_name;

    body.appendChild(saver);
    saver.dispatchEvent(new MouseEvent("click"));
    body.removeChild(saver);
    URL.revokeObjectURL(blobURL);
}

Answer 2

Ich habe das in der Konsole ausprobiert, und es funktioniert.

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));

Answer 3

Sie können dies nicht nur in Javascript tun. Javascript, das auf Browsern läuft, hat aus Sicherheitsgründen noch nicht genügend Rechte (es gab Vorschläge).

Stattdessen würde ich empfehlen, Folgendes zu verwenden Downloadify :

Eine winzige Javascript + Flash-Bibliothek, die das Erstellen und Herunterladen von Textdateien ohne Server-Interaktion ermöglicht.

Sie können eine einfache Demo sehen aquí wo Sie den Inhalt bereitstellen und die Funktionen zum Speichern/Abbrechen/Fehlerbehandlung testen können.

Answer 4

Für Chrome und Firefox habe ich eine reine JavaScript-Methode verwendet.

(Meine Anwendung kann nicht auf ein Paket wie Blob.js weil er von einer speziellen Maschine bedient wird: einem DSP, in dem ein WWWeb-Server eingepfercht ist und kaum Platz für irgendetwas anderes ist).

function FileSave(sourceText, fileIdentity) {
    var workElement = document.createElement("a");
    if ('download' in workElement) {
        workElement.href = "data:" + 'text/plain' + "charset=utf-8," + escape(sourceText);
        workElement.setAttribute("download", fileIdentity);
        document.body.appendChild(workElement);
        var eventMouse = document.createEvent("MouseEvents");
        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        workElement.dispatchEvent(eventMouse);
        document.body.removeChild(workElement);
    } else throw 'File saving not supported for this browser';
}

Anmerkungen, Vorbehalte und Ausweichmanöver:

• Ich hatte Erfolg mit diesem Code sowohl in Chrome- als auch in Firefox-Clients, die in Linux- (Maipo) und Windows-Umgebungen (7 und 10) laufen.
• Wenn jedoch sourceText größer als ein MB ist, bleibt Chrome manchmal (nur manchmal) in seinem eigenen Download stecken, ohne dass ein Fehler angezeigt wird; bei Firefox ist dieses Verhalten bisher nicht aufgetreten. Die Ursache könnte eine Blob-Beschränkung in Chrome sein. Ehrlich gesagt, ich weiß es einfach nicht; wenn jemand eine Idee hat, wie man das Problem beheben (oder zumindest feststellen) kann, bitte melden. Wenn die Download-Anomalie auftritt, wird beim Schließen des Chrome-Browsers eine Diagnose wie folgt erstellt
• Dieser Code ist nicht mit Edge oder Internet Explorer kompatibel; ich habe es nicht mit Opera oder Safari versucht.

Answer 5

StreamSaver ist eine Alternative, um sehr große Dateien zu speichern, ohne alle Daten im Speicher halten zu müssen.
In der Tat emuliert es alles, was der Server beim Speichern einer Datei tut, aber alles auf der Client-Seite mit Service Worker.

Sie können entweder den Writer abrufen und manuell Uint8Array's in diesen schreiben oder einen binären readableStream in den writable Stream leiten

Es gibt ein paar ejemplo vorzustellen:

• Wie speichert man mehrere Dateien als Zip-Datei?
• Piping eines readableStreams von z.B. Response o blob.stream() zu StreamSaver
• manuelles Schreiben in den beschreibbaren Stream, während Sie etwas eingeben
• oder Umkodierung eines Videos/Audios

Hier ist ein Beispiel in seiner einfachsten Form:

const fileStream = streamSaver.createWriteStream('filename.txt')

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)

Wenn Sie einen Blob speichern möchten, konvertieren Sie diesen einfach in einen readableStream

new Response(blob).body.pipeTo(...) // response hack
blob.stream().pipeTo(...) // feature reference