Javascript implements saving folder

In recent years, with the popularity of cloud storage, folder management has been ignored by many people. However, for some people who need to frequently use offline files, the need for local storage folders is still indispensable. This article will introduce how to use JavaScript to implement the save folder function.

1. Saving a single file

In JavaScript, the method of saving a file is relatively simple. You can use the a tag and download attribute in html5. Code example:

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

As shown above, first create the Blob object and file name of the file; then create a tag, set the download attribute to the file name, and set the href attribute to the URL address of the Blob object, and trigger The click event of the a tag is enough.

2. Save the folder

However, when we need to save multiple files, simply using the above method can no longer meet our needs. We need to consider packaging multiple files into a folder. For this situation, we can use the JSZip library.

JSZip is an open source JavaScript library that can create, read and decompress zip compressed files on the browser side. The following is a code example for saving a folder:

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

As shown above, first instantiate the JSZip library; then add the files that need to be saved to the zip instance through the zip.file() method ;Finally, use the zip.generateAsync() method to generate a blob object from the zip instance. Note that this method returns a Promise object and needs to be chained through the then method. Finally, we can use the FileSaver library to save the blob object locally to save the folder.

3. Compatibility Issues

It should be noted that the compatibility of the above methods is different between different browsers and needs to be adapted.

For the FileSaver library, it is not compatible in all browsers, such as Apple Safari, in which the WebKit kernel needs to be used, and the file name needs to be converted to ASCII encoding. The sample code is as follows:

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

For the JSZip library, it needs to consider the file type and encoding issues. For different types of files, different encodings need to be used. Also, be aware that some browsers may add additional files or folders.

Due to many browser compatibility issues, you need to consider many situations when using these libraries, especially issues such as file names and file types.

Summary:
This article introduces how to use JavaScript to realize the function of saving folders. During the implementation process, the JSZip library and FileSaver library need to be used. Because of browser compatibility issues, attention needs to be paid to adaptation between different browsers.

The above is the detailed content of Javascript implements saving folder. For more information, please follow other related articles on the PHP Chinese website!