How to use JSZip

An instance of JSZip represents a set of files. You can add them, remove them, modify them. You can also import an existing zip file or generate one.

Basic manipulations

The first step is to create an instance of JSZip :

var zip = new JSZip();

On this instance, we can add (and update) files and folders with .file(name, content) and .folder(name). They return the current JSZip instance so you can chain the calls.

// create a file
zip.file("hello.txt", "Hello[p my)6cxsw2q");
// oops, cat on keyboard. Fixing !
zip.file("hello.txt", "Hello World\n");

// 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");

With .folder(name), the returned object has a different root : if you add files on this object, you will put them in the created subfolder. This is just a view, the added files will also be in the "root" object.

var photoZip = zip.folder("photos");
// this call will create photos/README
photoZip.file("README", "a folder with photos");

You can access the file content with .file(name) and its getters :

zip.file("hello.txt").asText(); // "Hello World\n"

if (JSZip.support.uint8array) {
  zip.file("hello.txt").asUint8Array(); // Uint8Array { 0=72, 1=101, 2=108, more...}
}

You can also remove files or folders with .remove(name) :

zip.remove("photos/README");
zip.remove("photos");
// same as
zip.remove("photos"); // by removing the folder, you also remove its content.

Generate a zip file

With .generate(options) you can generate a zip file (not a real file but its representation in memory). Check this page for more informations on how to write / give the file to the user.

var content = null;
if (JSZip.support.uint8array) {
  content = zip.generate({type : "uint8array"});
} else {
  content = zip.generate({type : "string"});
}

Read a zip file

With .load(data) you can load a zip file. Check this page to see how to do properly (it's more tricky that it seems).

var new_zip = new JSZip();
// more files !
new_zip.load(content);

// you now have every files contained in the loaded zip
new_zip.file("hello.txt").asText(); // "Hello World\n"