Skip to content



Create ZIP Files Using JavaScript



28 August 2012no comments JavaScript Posts, JavaScript Tutorials

868 Total Views

ZIP (file format)

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

Sample 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>

Step 2. Generate Hello world ZIP

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

<HTML>
    <script type="text/javascript" src="jszip.js"></script>
</HEAD>
<BODY>
    <input type="button" onclick="create_zip()" value="Create Zip"></input>
</BODY>
function create_zip() {
    var zip = new JSZip();
    zip.add("hello1.txt", "Hello First Worldn");
    zip.add("hello2.txt", "Hello Second Worldn");
    content = zip.generate();
    location.href="data:application/zip;base64," + content;
}
</SCRIPT>
</HTML>

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.

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'
});

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

Enhanced by Zemanta

Spread The Love, Share Our Article

  • Delicious
  • Digg
  • Newsvine
  • RSS
  • StumbleUpon
  • Technorati
  • Twitter

Related Posts

Facebook Iconfacebook like buttonTwitter Icontwitter follow buttonFollow Us
Follow

Get every new post delivered to your Inbox

Join other followers