Javascript implémente le dossier de sauvegarde

Ces dernières années, avec la popularité du stockage dans le cloud, la gestion des dossiers a été ignorée par de nombreuses personnes. Cependant, pour certaines personnes qui ont besoin d'utiliser fréquemment des fichiers hors ligne, le besoin de dossiers de stockage locaux reste indispensable. Cet article explique comment utiliser JavaScript pour implémenter la fonction de dossier de sauvegarde.

1. Enregistrer un seul fichier

En JavaScript, la méthode d'enregistrement d'un fichier est relativement simple. Vous pouvez utiliser la balise a et l'attribut download en html5. Exemple de code :

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();

Comme indiqué ci-dessus, créez d'abord l'objet Blob et le nom de fichier du fichier ; puis créez la balise a, définissez l'attribut download sur le nom du fichier et définissez l'attribut href sur l'adresse URL de l'objet Blob. , et déclenchez le clic de la balise a. Les événements suffisent.

2. Enregistrez le dossier

Cependant, lorsque nous devons enregistrer plusieurs fichiers, la simple utilisation de la méthode ci-dessus ne peut plus répondre à nos besoins. Nous devons envisager de regrouper plusieurs fichiers dans un dossier. Pour cette situation, nous pouvons utiliser la bibliothèque JSZip.

JSZip est une bibliothèque JavaScript open source qui peut créer, lire et décompresser des fichiers compressés zip côté navigateur. Voici un exemple de code pour enregistrer un dossier :

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保存到本地
});

Comme indiqué ci-dessus, instanciez d'abord la bibliothèque JSZip ; puis utilisez la méthode zip.file()方法将需要保存的文件添加到zip实例中；最后利用zip.generateAsync() pour générer un objet blob à partir de l'instance zip. Notez que cette méthode renvoie un objet Promise et doit être enchaînée via la méthode then. Enfin, nous pouvons utiliser la bibliothèque FileSaver pour enregistrer l'objet blob localement afin d'enregistrer le dossier.

3. Problèmes de compatibilité

Il convient de noter que la compatibilité des méthodes ci-dessus est différente entre les différents navigateurs et qu'une adaptation est nécessaire.

Pour la bibliothèque FileSaver, elle n'est pas compatible dans tous les navigateurs, comme Apple Safari, dans lesquels le noyau WebKit doit être utilisé et le nom du fichier doit être converti en codage ASCII. L'exemple de code est le suivant :

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);
    }
}

Pour la bibliothèque JSZip, elle doit prendre en compte le type et l'encodage du fichier. Pour différents types de fichiers, différents encodages doivent être utilisés. Sachez également que certains navigateurs peuvent ajouter des fichiers ou des dossiers supplémentaires.

En raison des nombreux problèmes de compatibilité des navigateurs, de nombreuses situations doivent être prises en compte lors de l'utilisation de ces bibliothèques, notamment des problèmes tels que les noms et les types de fichiers.

Résumé :
Cet article explique comment utiliser JavaScript pour implémenter la fonction d'enregistrement des dossiers. Pendant le processus de mise en œuvre, la bibliothèque JSZip et la bibliothèque FileSaver doivent être utilisées. En raison des problèmes de compatibilité des navigateurs, une attention particulière doit être portée à l'adaptation entre les différents navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!