Create ZIP Files in JavaScript

Zip is a very useful file type if I must say most used. It is the most used file format for data compression and archiving. There are number utilities available to create/generate Zip file. Also most of the programming languages comes up with API supporting to generate Zip files. I have written a couple of articles for zipping/unzipping files in Java and PHP.

While browsing internet, I came up to a very interesting website http://jszip.stuartk.co.uk/. This is JavaScript based API to generate Zip files on the fly! It’s very simple to use. All you need to do is to include the jszip javascript file in your HTML document and call its API.

Let us see how to generate a simple ZIP file in JavaScript.

Hello world ZIP in JavaScript

Let us create a helloworld ZIP file which contains two text files, hello1.txt and hello2.txt.

Step 1. Import jszip JavaScript

Include the jszip javascript file in the HTML document where you want to generate ZIP files. You can download the jszip package and include it in HTML or directly include the jszip javascript through git repository.

<script type="text/javascript" 
  src="https://raw.github.com/Stuk/jszip/master/jszip.js"></script>

Code language: HTML, XML (xml)

Step 2. Generate Hello world ZIP

Following code snippet is HTML file which contains Javascript code to generate ZIP file.

<HTML>
<HEAD>
 <script type="text/javascript" src="jszip.js"></script>
</HEAD>

<BODY>

 <input type="button" onclick="create_zip()" value="Create Zip"></input>

</BODY>
<SCRIPT>

function create_zip() {
 var zip = new JSZip();
 zip.add("hello1.txt", "Hello First World\n");
 zip.add("hello2.txt", "Hello Second World\n");
 content = zip.generate();
 location.href="data:application/zip;base64," + content;
}

</SCRIPT>
</HTML>
Code language: HTML, XML (xml)

In above code snippet, we have a button “Create Zip” which calls javascript function create_zip(). This function calls jszip API to generate ZIP file.

Online Demo

Check the online demo.

Demo

Download

Filename Problem

If you have tried above demo in Firefox or Safari, you may have noticed the file that is generated has weird name: e.g. b77AewqA7.zip.part. This is because of existing bugs 367231 and 532230. However jszip comes with a unique workaround of this problem by using Downloadify.

zip = new JSZip();
zip.add("Hello.", "hello.txt");
Downloadify.create('downloadify',{
...
  data: function(){
    return zip.generate();
  },
...
  dataType: 'base64'
});

Code language: JavaScript (javascript)

Hope this basic demo will help you get going with Client side ZIP file creation in JavaScript.

View Comments

  • This solution doesn't work with internet explorer. It works for Chrome and Safari. It's not useful if you have to tell people to stop using Internet Explorer.

  • when using this code in my application it not create zip file but create file with extension part ?????????

  • Dear All,
    In order to understand what is going wrong in IE9, I tried debugging. Assigning the result of zip.generate() to the variable content generated an error: SCRIPT438: Object doesn't support property or method. However, when I replace the first line of html with this:

    then the exception does not fire. See also:
    http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
    Instead my browser is redirected to an URL starting with:
    data:application/zip;base64,UEsDBAoAAAAAA...
    If we can make sure the URL is recognised as a download, we can fix this problem!
    Kind regards

    • Hi, Thanks for your reply. Please let me know if this is working for IE version below 9. If yes, can you send me the piece of code(mail2padmanabhan@gmail.com).

Leave a Comment
Share
Published by
Viral Patel
Tags: gzip JavaScript Javascript Compression
13 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago