使用jszip库如何压缩文件

Question

我正在使用HTML5和jQuery为移动设备开发一个离线应用程序。 我想使用JSZip从本地存储中备份文件。 下面是我所做的代码片段...

  if (localStorageKeys.length > 0) {
            for (var i = 0; i < localStorageKeys.length; i++) {
                var key = localStorageKeys[i];
                if (key.search(_instrumentId) != -1) {                  
                        var data = localStorage.getItem(localStorageKeys[i])
                        var zip = new JSZip();
                        zip.file(localStorageKeys[i] + ".txt", data);
                        var datafile = document.getElementById('backupData');
                        datafile.download = "DataFiles.zip";
                        datafile.href = window.URL.createObjectURL(zip.generate({ type: "blob" }));                        
                }
                else {

                }


            }

        }

在上面的代码中，我正在循环遍历本地存储内容并将每个文件保存为文本格式。我面临的挑战是如何在 DataFiles.zip 内创建多个文本文件，因为当前我只能在压缩文件夹内创建一个文本文件。作为 JavaScript 的新手，请谅解我的问题中可能有些含糊不清之处。 提前感谢您的帮助。

- JoseLuke

Answer 1

只需不断调用zip.file()函数即可。

看一下他们文档页面上的示例（我的注释）：

var zip = new JSZip();

// Add a text file with the contents "Hello World\n"
zip.file("Hello.txt", "Hello World\n");

// Add a another text file with the contents "Goodbye, cruel world\n"
zip.file("Goodbye.txt", "Goodbye, cruel world\n");

// Add a folder named "images"
var img = zip.folder("images");

// Add a file named "smile.gif" to that folder, from some Base64 data
img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"base64"}).then(function (content) {
     location.href="data:application/zip;base64," + content;
});

重要的是要理解你所写的代码 - 学习每一行代码的作用。如果你这样做，你会意识到你只需要再次调用zip.file()来添加另一个文件。

- Jonathon Reinhart

---

@Jonathon...非常感谢，它完美地运行了。你向我解释得就像我是一个两岁的婴儿一样，我很满意。再次感谢。 - JoseLuke

你在变量imgData中存储了什么？因为我正在尝试将一个mp3写入它以达到相同的结果。 - Eduardo La Hoz Miranda

@EduardoLaHozMiranda 在这种情况下，它将是一张原始的GIF图片，并且经过Base64编码。你想要使用第一种形式，即只是原始字符串数据。 - Jonathon Reinhart

Answer 2

补充@Jonathon Reinhart的回答，
您也可以同时设置文件名和路径

// create a file and a folder
zip.file("nested/hello.txt", "Hello World\n");
// same as
zip.folder("nested").file("hello.txt", "Hello World\n");

- Gal Margalit

Answer 3

如果您收到一个文件列表（来自UI、数组或其他方式），您可以在归档之前进行压缩。代码类似于以下内容：

function upload(files){

    var zip = new JSZip();                       
    let archive = zip.folder("test");

    files.map(function(file){
        files.file(file.name, file.raw, {base64: true});
    }.bind(this));

    return archive.generateAsync({
        type: "blob",
        compression: "DEFLATE",
        compressionOptions: {
           level: 6
        }
    }).then(function(content){ 
        // send to server or whatever operation
    });
}

这对我在多个JSON文件上都有效。也许会有所帮助。

- Mara Black

Answer 4

如果您想压缩文件并需要Base64输出，则可以使用以下代码 -

import * as JSZip from 'jszip'


var zip = new JSZip();
    zip.file("Hello.json", this.fileContent);
    zip.generateAsync({ type: "base64" }).then(function (content) {
      const base64Data = content

- Avi Sen