Wie kann ich mit JavaScript erstellte Dateien im Browser speichern, ohne einen Server zu verwenden?

Erstellen und Speichern von Dateien mit HTML5/JavaScript

Das Erstellen und Speichern von Dateien in einem Webbrowser ist eine häufige Aufgabe, insbesondere wenn es um Dynamik geht Inhalt. Es ist zwar möglich, den Server in diesen Prozess einzubeziehen, es kann jedoch ineffizient sein, wenn die Rolle des Servers minimal ist. Diese Frage untersucht die Möglichkeit, reines JavaScript zu verwenden, um das Speichern von Dateien in einem Webbrowser zu erleichtern, ohne den Server einzubeziehen.

Die Herausforderung: Dateien in JavaScript speichern

Der Benutzer hat hat ein Skript entwickelt, das Collada-Dateien (ein ausführliches 3D-Modellformat) in ein besser verwaltbares JSON-Format umwandelt. Die analysierte Datei wird im Speicher gespeichert und der Benutzer möchte eine Möglichkeit bieten, die transformierte Datei herunterzuladen, ohne den Server einzubeziehen.

Die Lösung: HTML5-Blob und Download-Attribute

Die Lösung liegt in den HTML5-Blob- und Download-Attributen. Das Blob-Objekt ermöglicht es uns, ein dateiähnliches Objekt im Speicher zu erstellen, während das Download-Attribut im -Tag es uns ermöglicht, den Dateinamen anzugeben und den Download zu starten.

Hier ist ein Codeausschnitt, der den Prozess demonstriert :

function download(filename, text) {
    var blob = new Blob([text], {type: 'text/plain'});
    var pom = document.createElement('a');
    pom.setAttribute('href', URL.createObjectURL(blob));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Nutzung:

Um die Download-Funktion zu nutzen, rufen Sie einfach an Fügen Sie es mit dem gewünschten Dateinamen und dem zu speichernden Text hinzu. Zum Beispiel:

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

Dadurch wird auf dem Computer des Benutzers eine Datei mit dem Namen „test.txt“ und dem Text „Hallo Welt!“ erstellt. darauf geschrieben.

Kompatibilität:

Die Download-Funktion funktioniert in modernen Browsern, die die Blob- und Download-Attribute unterstützen. Dazu gehört:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript erstellte Dateien im Browser speichern, ohne einen Server zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!