jQuery 如何使用 jszip 库压缩文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17986432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Zip files using jszip library
提问by JoseLuke
Am working on an offline application using HTML5 and jquery for mobile. i want to back up files from the local storage using jszip. below is a code snippet of what i have done...
我正在开发一个使用 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 {
}
}
}
in the code above am looping through the localstorage content and saving ezch file in a text format. the challenge that am facing is how to create several text files inside DataFiles.zipas currently am only able to create one text file inside the zipped folder. Am new to javascript so bare with any ambiguity in my question. thanks in advance.
在上面的代码中，我遍历 localstorage 内容并以文本格式保存 ezch 文件。我面临的挑战是如何在DataFiles.zip 中创建多个文本文件，因为目前只能在压缩文件夹中创建一个文本文件。我是 javascript 新手，所以我的问题没有任何歧义。提前致谢。
回答by Jonathon Reinhart
Just keep calling zip.file().
继续打电话zip.file()。
Look at the example from their documentation page(comments mine):
从他们的文档页面查看示例（我的评论）：
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;
});
The important thing is to understandthe code you've written - learn what each line does. If you do this, you'd realize that you just need to call zip.file()again to add another file.
重要的是理解您编写的代码 - 了解每一行的作用。如果你这样做，你会意识到你只需要zip.file()再次调用来添加另一个文件。
回答by Gal Margalit
Adding to @Jonathon Reinhart answer,
You could also set both file name and path at the same time
添加到@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");
回答by Mara Black
If you receive a list of files ( from ui or array or whatever ) you can make a compress before and then archive. The code is something like this:
如果您收到文件列表（来自 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
});
}
this worked for me at multiple json files. Maybe it helps.
这在多个 json 文件中对我有用。也许它有帮助。
