7 ms·

JSZip: Create, read and edit .zip files with JavaScript

113 points by saltcookie 12y ago

na85 12y ago
>JavaScript today is capable of generating a lot of data. The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you. ... Am I not understanding what they're saying here or do the authors really not understand how the internet works? It looks to me like they're saying "don't bother letting your users download zip files. Save your bandwidth! Just get them to send themselves a zip file, client-side!"
- lmz 12y ago
  It seems that the data to be zipped is also on the client side (e.g. a color scheme designer tool that wants to bundle some css files and a background image). If the alternative is sending the uncompressed data back to the server and having the server bundle them up into a zip, this approach saves bandwidth.
- rkuykendall-com 12y ago
  Well, if you have a JS app, then it's likely the content the user wants to generate is already in their browser. So you could generate a zip locally and "download" it locally, without any network traffic at all.
- deleted 12y ago
  [deleted]
- prezjordan 12y ago
  Consider something like bootstrap, which allows you to customize your download before sending you a zip file. The assets are already loaded (since you're viewing the bootstrap demo page), so instead of making a request to another server to generate some sort of compressed file for you, that labor is offloaded to the client.
  - nacs 12y ago
    Except you're unnecessarily bogging down the user's browser to a far greater extent (base64 encoding/decoding everything on a possibly underpowered CPU/IO) than the amount of work it would take to do it on the server (pure binary processing on a high end CPU). I'm guessing Bootstrap can do it because they know most Bootstrap users are developers with decent PCs but for a more mainstream audience, it would be problematic.
    - TD-Linux 12y ago
      Except that most clients are ridiculously overpowered compared to a heavily loaded server. Even the slowest 1.3ghz core 2 duo is better than a high end xeon if there are 10 users at one time.
    - TheZenPsycho 12y ago
      Once again, a hacker news commenter's idea of what in browser javascript performance is like is ridiculously 15 years out of date. It's 2014 now. Your iphone is 10 times faster than your 1998 pentium 2. Even with the JS vm penalty. Unless you're zipping 70mb files, there's no chance you're overwhelming anyone's browser. The usecase for this is the same you'd have for any desktop application: A handy "binary file format" library. Data portability wins.
    - kalleboo 12y ago
      Have you used Mega.com? It does in-browser (JavaScript) encryption of uploads and downloads. And I can still hit 5 MB/s throughput. JavaScript can handle Zip compression easily. For most users, bandwidth is in shorter supply than CPU. Especially on mobile (your constrained CPU/IO case), where people are using 3G or worse, which is often even billed by the MB.
  - stu_k 12y ago
    In fact the bootstrap customizer does indeed use JSZip to create the zipped download! See http://getbootstrap.com/assets/js/customize.min.js http://getbootstrap.com/assets/js/customize.min.js
- nacs 12y ago
  I'm guessing they mean some kind of situation where the resources you're zipping up have already been downloaded to the user's browser (like a "download as Zip" link for a set of images that are being displayed on the page). In reality, I don't think there is a good use-case for this as any files that need to be zipped are likely too large for a user's browser to process with JS (it could bog down or crash the browser). I have a feeling they already realize this though as the example zip file is 237 bytes. If an HTTP header is larger than your zipped file, it probably doesn't need to be zipped/gzipped in the first place.
  - deleted 12y ago
    [deleted]
- moron4hire 12y ago
  It would be great for my current project. The project is entirely client-side right now, there is 0 server-side component (though certain features in the near future will require a server-side aspect). For what my project is doing, and for the various interpretations of what ZIP can be, having client-side ZIP generation is great. Just think of all of the container formats that use ZIP with different file extensions. JAR and ePub to be two off the top of my head; I am sure there are plenty more. The importance is not in compression, it is in container formats.
- stu_k 12y ago
  Hi, I'm the author of JSZip. This sentence is kind of awkward. What I meant is that a lot of data is generated in the browser, and traditionally (at least at the time I wrote this library almost 5 years ago) this would involve sending the data back to your server to zip it up and send it back to the user for download. Instead this can all be done client side. As an example, someone told me about a web app[1] which allows you to create an animated sprite offline. They use JSZip to let you download all the frames in one file. There's actually an outstanding PR[2] to update the documentation that I still need to review, hopefully that makes things clearer. [1] http://www.piskelapp.com/ http://www.piskelapp.com/ [2] https://github.com/Stuk/jszip/pull/114 https://github.com/Stuk/jszip/pull/114
nanidin 12y ago
Potential use case: instead of using CSS sprite maps (putting all of your images into one image to reduce the number of http requests generated by your page, then using css magic to select regions inside of that image), image files could be zipped into an image package that is delivered to the client, who unzips it and uses the images inside. This would cut down on the number of requests made, but allow the images to be used as normal images instead of as images within a sprite sheet.
- chadscira 12y ago
  i'm surprised we don't have a cross-browser webarchive concept yet... especially with the emphasis on mobile.
  - dsl 12y ago
    We have a fantastic one based on MIME that is usable by everything except Firefox (however you need to enable some experimental stuff in Chrome). http://en.wikipedia.org/wiki/MHTML http://en.wikipedia.org/wiki/MHTML
    - chadscira 12y ago
      i wasn't aware of this, very cool
    - TazeTSchnitzel 12y ago
      Until now I always thought the M stood for Microsoft. Now I know.
  - stu_k 12y ago
    There is definitely work towards this. This spec was recently released and has some potential: https://github.com/w3ctag/packaging-on-the-web https://github.com/w3ctag/packaging-on-the-web
- jahitr 12y ago
  Some images formats already come with compression. Also, zip doesn't work with well with binary data. Using CSS to "subscript" into the sprite is a better solution.
artellectual 12y ago
Actually, one of the best use case for this is, when a user wants to upload multiple images / files, we can use the html5 file api with zip js generate 1 zip file and upload just that one file and extract on the server. It will be much faster. And actually you can use this in the web worker api so it doesn't block the Ui thread
sheetjs 12y ago
We use jszip for parsing xlsx/xlsm/xlsb files in the browser (Excel 2007+ files are zip files that contain XML or binary files in specific locations): https://github.com/SheetJS/js-xlsx https://github.com/SheetJS/js-xlsx JSZip works well for small files, but unzipping XLSB files larger than 50M seem to cause out of memory issues in Firefox
- stu_k 12y ago
  This project is great, because it's something I never envisioned for the library! You may want to take a look at the master branch, because we've recently updated our inflate/deflate implementation to use the much faster Pako, https://github.com/nodeca/pako https://github.com/nodeca/pako
- TazeTSchnitzel 12y ago
  Have you considered zip.js instead? It claims to work with files up to 4GB. It also can zip large files without any issues for me in Firefox.
  - sheetjs 12y ago
    When we first evaluated options, zip.js only supported IE9+ (and IE6-8 were still relevant browsers) while JSZip supports IE6+. In fact, the Base64 text box was introduced in http://oss.sheetjs.com/js-xlsx/ http://oss.sheetjs.com/js-xlsx/ specifically to test IE6-9 (which do not support the HTML5 File API)
    - TazeTSchnitzel 12y ago
      I see. Inevitably its support for older browsers makes it slower, however.
clxl 12y ago
Atwood's law in action
moron4hire 12y ago
This is exactly a project I was about to embark upon to generate ePub files from client-side JS. Thanks!
- davidw 12y ago
  Interesting - can I ask what you're working on? I'd be a bit worried about potentially memory issues with image-heavy ePubs.
  - moron4hire 12y ago
    A minimalist writing tool to train beginner novelists on completing writing projects: https://www.justwritedammit.com/#main/about https://www.justwritedammit.com/#main/about I'm specifically targeting novelists (at least, right now), so pictures and complex layouts shouldn't be an issue. I want it to be something you can easily pick up, plod away through, maybe pay someone to do some editing for you, and then walk you through pushing it out on the Amazon Kindle Store.
collyw 12y ago
Is this really news? Almost every server side language out there will have a zip library, and I doubt any of those got mentioned on HN.
- kalleboo 12y ago
  Server-side languages, yes. There are lots of those, so each one doesn't impact many. But there's only one client-side language on the web, so it impacts everyone.
  - collyw 12y ago
    So we are reporting it just because it is JavaScript.
    - avmich 12y ago
      Yes. JavaScript is lingua franca of the Web, so it may be important to have a particular functionality implemented in JavaScript. This way, if you, say, want to take a part of the program and use it elsewhere, you have the advantage of the same language. If you want to ask a question about the program, you can count on other people knowing the language. If you want to illustrate something using a program, you have a common ground here.
nawitus 12y ago
Does this handle very large files on Node.js? npm for one fails with large files, by "large" I mean something like a few hundred megabytes. It's very problematic especially on Windows.
klunger 12y ago
Am I misunderstanding this, or could this be used to send a client a large amount of data in a zip file? Let's say the client is using WebView...
bhouston 12y ago
We've used https://github.com/EvanOxfeld/node-unzip/issues https://github.com/EvanOxfeld/node-unzip/issues in production and we've had a surprising number of corrupt zip files created by it. We've switched to using a barely wrapped zip command line tool. Is PSZIp better?
allthatisgold 12y ago
I tried JSZip not too long ago for my side project and it was quite slow. I've been using http://gildas-lormeau.github.io/zip.js/ http://gildas-lormeau.github.io/zip.js/ and I'm very happy with it. I hope to release my web app some time this week.
- TazeTSchnitzel 12y ago
  zip.js seems to be the better of the two. It uses typed arrays, so it's performant and I can zip large (140MB) files quickly and without hanging the browser.
ragecore 12y ago
Why not unrar and untar using javascript as well? https://github.com/varunmayya/bitjs https://github.com/varunmayya/bitjs
ff7c11 12y ago
It's really fast at reading zip files created by Google takeout. I use it at http://theyhaveyour.info http://theyhaveyour.info as it works perfectly with the FileReader API. For reading only though - haven't tried writing with it.
napoleond 12y ago
If you're purely interested in client-side compression in the browser (i.e. compatibility with server libraries/filesystem tools is not important) it's possible to get better compression in less time using http://pieroxy.net/blog/pages/lz-string/index.html http://pieroxy.net/blog/pages/lz-string/index.html
moron4hire 12y ago
Holy carp on a stick, that was so easy. You've made my day today. BTW, here is how I make files download with the filename that I want: https://github.com/capnmidnight/JWD/blob/master/html5/desktop.js#L6-L16 https://github.com/capnmidnight/JWD/blob/master/html5/deskto... The call to the "a" function on line 8 is just generating an HTML anchor tag. You should be able to figure it out from there.

113 points by saltcookie 12y ago

na85 12y ago

>JavaScript today is capable of generating a lot of data. The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you. ... Am I not understanding what they're saying here or do the authors really not understand how the internet works? It looks to me like they're saying "don't bother letting your users download zip files. Save your bandwidth! Just get them to send themselves a zip file, client-side!"

lmz 12y ago
It seems that the data to be zipped is also on the client side (e.g. a color scheme designer tool that wants to bundle some css files and a background image). If the alternative is sending the uncompressed data back to the server and having the server bundle them up into a zip, this approach saves bandwidth.
rkuykendall-com 12y ago
Well, if you have a JS app, then it's likely the content the user wants to generate is already in their browser. So you could generate a zip locally and "download" it locally, without any network traffic at all.
deleted 12y ago
[deleted]
prezjordan 12y ago
Consider something like bootstrap, which allows you to customize your download before sending you a zip file. The assets are already loaded (since you're viewing the bootstrap demo page), so instead of making a request to another server to generate some sort of compressed file for you, that labor is offloaded to the client.
- nacs 12y ago
  Except you're unnecessarily bogging down the user's browser to a far greater extent (base64 encoding/decoding everything on a possibly underpowered CPU/IO) than the amount of work it would take to do it on the server (pure binary processing on a high end CPU). I'm guessing Bootstrap can do it because they know most Bootstrap users are developers with decent PCs but for a more mainstream audience, it would be problematic.
  - TD-Linux 12y ago
    Except that most clients are ridiculously overpowered compared to a heavily loaded server. Even the slowest 1.3ghz core 2 duo is better than a high end xeon if there are 10 users at one time.
  - TheZenPsycho 12y ago
    Once again, a hacker news commenter's idea of what in browser javascript performance is like is ridiculously 15 years out of date. It's 2014 now. Your iphone is 10 times faster than your 1998 pentium 2. Even with the JS vm penalty. Unless you're zipping 70mb files, there's no chance you're overwhelming anyone's browser. The usecase for this is the same you'd have for any desktop application: A handy "binary file format" library. Data portability wins.
  - kalleboo 12y ago
    Have you used Mega.com? It does in-browser (JavaScript) encryption of uploads and downloads. And I can still hit 5 MB/s throughput. JavaScript can handle Zip compression easily. For most users, bandwidth is in shorter supply than CPU. Especially on mobile (your constrained CPU/IO case), where people are using 3G or worse, which is often even billed by the MB.
- stu_k 12y ago
  In fact the bootstrap customizer does indeed use JSZip to create the zipped download! See http://getbootstrap.com/assets/js/customize.min.js http://getbootstrap.com/assets/js/customize.min.js
nacs 12y ago
I'm guessing they mean some kind of situation where the resources you're zipping up have already been downloaded to the user's browser (like a "download as Zip" link for a set of images that are being displayed on the page). In reality, I don't think there is a good use-case for this as any files that need to be zipped are likely too large for a user's browser to process with JS (it could bog down or crash the browser). I have a feeling they already realize this though as the example zip file is 237 bytes. If an HTTP header is larger than your zipped file, it probably doesn't need to be zipped/gzipped in the first place.
- deleted 12y ago
  [deleted]
moron4hire 12y ago
It would be great for my current project. The project is entirely client-side right now, there is 0 server-side component (though certain features in the near future will require a server-side aspect). For what my project is doing, and for the various interpretations of what ZIP can be, having client-side ZIP generation is great. Just think of all of the container formats that use ZIP with different file extensions. JAR and ePub to be two off the top of my head; I am sure there are plenty more. The importance is not in compression, it is in container formats.
stu_k 12y ago
Hi, I'm the author of JSZip. This sentence is kind of awkward. What I meant is that a lot of data is generated in the browser, and traditionally (at least at the time I wrote this library almost 5 years ago) this would involve sending the data back to your server to zip it up and send it back to the user for download. Instead this can all be done client side. As an example, someone told me about a web app[1] which allows you to create an animated sprite offline. They use JSZip to let you download all the frames in one file. There's actually an outstanding PR[2] to update the documentation that I still need to review, hopefully that makes things clearer. [1] http://www.piskelapp.com/ http://www.piskelapp.com/ [2] https://github.com/Stuk/jszip/pull/114 https://github.com/Stuk/jszip/pull/114

nanidin 12y ago

Potential use case: instead of using CSS sprite maps (putting all of your images into one image to reduce the number of http requests generated by your page, then using css magic to select regions inside of that image), image files could be zipped into an image package that is delivered to the client, who unzips it and uses the images inside. This would cut down on the number of requests made, but allow the images to be used as normal images instead of as images within a sprite sheet.

chadscira 12y ago
i'm surprised we don't have a cross-browser webarchive concept yet... especially with the emphasis on mobile.
- dsl 12y ago
  We have a fantastic one based on MIME that is usable by everything except Firefox (however you need to enable some experimental stuff in Chrome). http://en.wikipedia.org/wiki/MHTML http://en.wikipedia.org/wiki/MHTML
  - chadscira 12y ago
    i wasn't aware of this, very cool
  - TazeTSchnitzel 12y ago
    Until now I always thought the M stood for Microsoft. Now I know.
- stu_k 12y ago
  There is definitely work towards this. This spec was recently released and has some potential: https://github.com/w3ctag/packaging-on-the-web https://github.com/w3ctag/packaging-on-the-web
jahitr 12y ago
Some images formats already come with compression. Also, zip doesn't work with well with binary data. Using CSS to "subscript" into the sprite is a better solution.

artellectual 12y ago

Actually, one of the best use case for this is, when a user wants to upload multiple images / files, we can use the html5 file api with zip js generate 1 zip file and upload just that one file and extract on the server. It will be much faster. And actually you can use this in the web worker api so it doesn't block the Ui thread

sheetjs 12y ago

We use jszip for parsing xlsx/xlsm/xlsb files in the browser (Excel 2007+ files are zip files that contain XML or binary files in specific locations): https://github.com/SheetJS/js-xlsx https://github.com/SheetJS/js-xlsx JSZip works well for small files, but unzipping XLSB files larger than 50M seem to cause out of memory issues in Firefox

stu_k 12y ago
This project is great, because it's something I never envisioned for the library! You may want to take a look at the master branch, because we've recently updated our inflate/deflate implementation to use the much faster Pako, https://github.com/nodeca/pako https://github.com/nodeca/pako
TazeTSchnitzel 12y ago
Have you considered zip.js instead? It claims to work with files up to 4GB. It also can zip large files without any issues for me in Firefox.
- sheetjs 12y ago
  When we first evaluated options, zip.js only supported IE9+ (and IE6-8 were still relevant browsers) while JSZip supports IE6+. In fact, the Base64 text box was introduced in http://oss.sheetjs.com/js-xlsx/ http://oss.sheetjs.com/js-xlsx/ specifically to test IE6-9 (which do not support the HTML5 File API)
  - TazeTSchnitzel 12y ago
    I see. Inevitably its support for older browsers makes it slower, however.

clxl 12y ago

Atwood's law in action

moron4hire 12y ago

This is exactly a project I was about to embark upon to generate ePub files from client-side JS. Thanks!

davidw 12y ago
Interesting - can I ask what you're working on? I'd be a bit worried about potentially memory issues with image-heavy ePubs.
- moron4hire 12y ago
  A minimalist writing tool to train beginner novelists on completing writing projects: https://www.justwritedammit.com/#main/about https://www.justwritedammit.com/#main/about I'm specifically targeting novelists (at least, right now), so pictures and complex layouts shouldn't be an issue. I want it to be something you can easily pick up, plod away through, maybe pay someone to do some editing for you, and then walk you through pushing it out on the Amazon Kindle Store.

collyw 12y ago

Is this really news? Almost every server side language out there will have a zip library, and I doubt any of those got mentioned on HN.

kalleboo 12y ago
Server-side languages, yes. There are lots of those, so each one doesn't impact many. But there's only one client-side language on the web, so it impacts everyone.
- collyw 12y ago
  So we are reporting it just because it is JavaScript.
  - avmich 12y ago
    Yes. JavaScript is lingua franca of the Web, so it may be important to have a particular functionality implemented in JavaScript. This way, if you, say, want to take a part of the program and use it elsewhere, you have the advantage of the same language. If you want to ask a question about the program, you can count on other people knowing the language. If you want to illustrate something using a program, you have a common ground here.

nawitus 12y ago

Does this handle very large files on Node.js? npm for one fails with large files, by "large" I mean something like a few hundred megabytes. It's very problematic especially on Windows.

klunger 12y ago

Am I misunderstanding this, or could this be used to send a client a large amount of data in a zip file? Let's say the client is using WebView...

bhouston 12y ago

We've used https://github.com/EvanOxfeld/node-unzip/issues https://github.com/EvanOxfeld/node-unzip/issues in production and we've had a surprising number of corrupt zip files created by it. We've switched to using a barely wrapped zip command line tool. Is PSZIp better?

allthatisgold 12y ago

I tried JSZip not too long ago for my side project and it was quite slow. I've been using http://gildas-lormeau.github.io/zip.js/ http://gildas-lormeau.github.io/zip.js/ and I'm very happy with it. I hope to release my web app some time this week.

TazeTSchnitzel 12y ago
zip.js seems to be the better of the two. It uses typed arrays, so it's performant and I can zip large (140MB) files quickly and without hanging the browser.

ragecore 12y ago

Why not unrar and untar using javascript as well? https://github.com/varunmayya/bitjs https://github.com/varunmayya/bitjs

ff7c11 12y ago

It's really fast at reading zip files created by Google takeout. I use it at http://theyhaveyour.info http://theyhaveyour.info as it works perfectly with the FileReader API. For reading only though - haven't tried writing with it.

napoleond 12y ago

If you're purely interested in client-side compression in the browser (i.e. compatibility with server libraries/filesystem tools is not important) it's possible to get better compression in less time using http://pieroxy.net/blog/pages/lz-string/index.html http://pieroxy.net/blog/pages/lz-string/index.html

moron4hire 12y ago

Holy carp on a stick, that was so easy. You've made my day today. BTW, here is how I make files download with the filename that I want: https://github.com/capnmidnight/JWD/blob/master/html5/desktop.js#L6-L16 https://github.com/capnmidnight/JWD/blob/master/html5/deskto... The call to the "a" function on line 8 is just generating an HTML anchor tag. You should be able to figure it out from there.