Create Zip Files with JavaScript

By  on  

While we're doing amazing things with JavaScript on the server side, it's important not to take our eyes off of some of the great stuff happening on the client side.  One such awesome project I recently discovered was JSZip:  a JavaScript library that allows you to easily generate ZIP files from the front-end.  And why is that useful?  You can allow users to select and download images from a gallery or just about anything else.  Let's have a look at how JSZip allows you to generate structured Zip files from the client side!

Start by grabbing the JSZip library , which happens to work in all major browsers.  Once the library is available within the page, generating a Zip file is really just a few lines of code:

var zip = new JSZip();

// Add an top-level, arbitrary text file with contents
zip.file("Hello.txt", "Hello World\n");

// Generate a directory within the Zip file structure
var img = zip.folder("images");

// Add a file to the directory, in this case an image with data URI as contents
img.file("smile.gif", imgData, {base64: true});

// Generate the zip file asynchronously
zip.generateAsync({type:"blob"})
.then(function(content) {
    // Force down of the Zip file
    saveAs(content, "archive.zip");
});

You can add individual files with custom names and contents, as well as arbitrary directories.  Once your contents are added, JSZip can asynchronously generate your Zip file and you can subsequently trigger download.

You can also load and read Zip files:
var read_zip = new JSZip();
// Load zip content; you'd use fetch to get the content
read_zip.loadAsync(content)
.then(function(zip) {
    // Read from the zip file!
    read_zip.file("hello.txt").async("string"); // a promise of "Hello World\n"
});

I really appreciate JSZip's simplicity.  There are more advanced and complicated libraries available, like zip.js, but JSZip will likely cover most use cases.  One great example of taking advantage of Zip files on the client side is in the Service Worker Cookbook: cache a Zip file locally, extract its contents, and serve within a service worker.  Whatever your use case, know that Zip files can be read and generated without any need for a server!

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

Discussion

  1. Andrew Wooldridge

    Thank you so much for this! I am creating a web based RPG maker, and I needed a way to create zip archives. This is perfect!

  2. Steve Fu

    May I know if this solution works in Mobile / Tablet App?

  3. Hi, thanks for your article.

    Your missing one point, the saveAs function.

    Either, you can use FileSaver.js if you work with NodeJS (server side) mentionned in https://stuk.github.io/jszip/

    Or you can use the following function if you work on the client side only:

    function saveAs(blob, filename) {
      if (typeof navigator.msSaveOrOpenBlob !== 'undefined') {
        return navigator.msSaveOrOpenBlob(blob, fileName);
      } else if (typeof navigator.msSaveBlob !== 'undefined') {
        return navigator.msSaveBlob(blob, fileName);
      } else {
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;
        elem.style = 'display:none;opacity:0;color:transparent;';
        (document.body || document.documentElement).appendChild(elem);
        if (typeof elem.click === 'function') {
          elem.click();
        } else {
          elem.target = '_blank';
          elem.dispatchEvent(new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
          }));
        }
        URL.revokeObjectURL(elem.href);
      }
    }
    
  4. Gabriel

    What is ‘imgData’? how I can get this?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!