Javascript implementiert den Speicherordner

In den letzten Jahren, mit der Popularität von Cloud-Speicher, wurde die Ordnerverwaltung von vielen Menschen ignoriert. Für manche Menschen, die häufig Offlinedateien verwenden müssen, ist der Bedarf an lokalen Speicherordnern jedoch immer noch unabdingbar. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zum Speichern von Ordnern implementieren.

1. Eine einzelne Datei speichern

In JavaScript ist die Methode zum Speichern einer Datei relativ einfach. Sie können das a-Tag und das Download-Attribut in HTML5 verwenden. Codebeispiel:

var blob = new Blob([content]);  // content为需要保存的文本内容

var fileName = 'example.txt';

var a = document.createElement('a');

a.download = fileName;

a.href = URL.createObjectURL(blob);

a.click();

Erstellen Sie wie oben gezeigt zuerst das Blob-Objekt und den Dateinamen der Datei. Erstellen Sie dann das Tag a, legen Sie das Download-Attribut auf den Dateinamen und das href-Attribut auf die URL-Adresse des Blob-Objekts fest , und lösen Sie den Klick auf die a-Tag-Ereignisse aus.

2. Speichern Sie den Ordner

Wenn wir jedoch mehrere Dateien speichern müssen, kann die einfache Verwendung der oben genannten Methode unsere Anforderungen nicht mehr erfüllen. Wir müssen darüber nachdenken, mehrere Dateien in einen Ordner zu packen. Für diese Situation können wir die JSZip-Bibliothek verwenden.

JSZip ist eine Open-Source-JavaScript-Bibliothek, die ZIP-komprimierte Dateien auf der Browserseite erstellen, lesen und dekomprimieren kann. Das Folgende ist ein Codebeispiel zum Speichern eines Ordners:

var zip = new JSZip();

zip.file("example1.txt", "content1");  // 将需要保存的文本内容添加到zip实例中
zip.file("example2.png", "content2");

zip.generateAsync({type:"blob"})  // 将zip打包成blob对象
.then(function(content) {
    saveAs(content, "example.zip");  // 调用FileSaver库将blob保存到本地
});

Instanziieren Sie wie oben gezeigt zuerst die JSZip-Bibliothek und verwenden Sie dann die Methode zip.file()方法将需要保存的文件添加到zip实例中；最后利用zip.generateAsync(), um ein Blob-Objekt aus der Zip-Instanz zu generieren. Beachten Sie, dass diese Methode ein Promise-Objekt zurückgibt und durch die then-Methode verkettet werden muss. Schließlich können wir die FileSaver-Bibliothek verwenden, um das Blob-Objekt lokal zu speichern und den Ordner zu speichern.

3. Kompatibilitätsprobleme

Es ist zu beachten, dass die Kompatibilität der oben genannten Methoden zwischen verschiedenen Browsern unterschiedlich ist und eine Anpassung erforderlich ist.

Die FileSaver-Bibliothek ist nicht mit allen Browsern kompatibel, z. B. Apple Safari, in denen der WebKit-Kernel verwendet werden muss und der Dateiname in ASCII-Kodierung konvertiert werden muss. Der Beispielcode lautet wie folgt:

function onExportClick(){
    var text     = fileText
    var filename = 'test.txt'.replace(/[^a-zd_]/gi,'_').toLowerCase();
    var blob = new Blob([text], {type: 'text/plain'});
    if(window.navigator.msSaveOrOpenBlob){
        window.navigator.msSaveBlob(blob, filename);
    }else{
        var a = document.createElement('a');
        var url = URL.createObjectURL(blob);

        if(a.download != undefined){
            a.href     = url;
            a.download = filename;
            a.click();
        }else{
            window.location.href = url;
        }

        URL.revokeObjectURL(url);
    }
}

Für die JSZip-Bibliothek müssen der Typ und die Codierung der Datei berücksichtigt werden. Für unterschiedliche Dateitypen müssen unterschiedliche Kodierungen verwendet werden. Beachten Sie außerdem, dass einige Browser möglicherweise zusätzliche Dateien oder Ordner hinzufügen.

Aufgrund der vielen Probleme mit der Browserkompatibilität gibt es viele Situationen, die bei der Verwendung dieser Bibliotheken berücksichtigt werden müssen, insbesondere Probleme wie Dateinamen und Dateitypen.

Zusammenfassung:
In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zum Speichern von Ordnern implementieren. Während des Implementierungsprozesses müssen die JSZip-Bibliothek und die FileSaver-Bibliothek verwendet werden. Aufgrund von Browserkompatibilitätsproblemen muss auf die Anpassung zwischen verschiedenen Browsern geachtet werden.

Das obige ist der detaillierte Inhalt vonJavascript implementiert den Speicherordner. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!