javascript - zip a Blob with zip.js

Question

I need to store a lot of text in WebSQl, so I decided to compress the text with zip.js and store the compressed Blobs.

From the documentation you can compress a blob as follows:

function zipBlob(filename, blob, callback) {
   // use a zip.BlobWriter object to write zipped data into a Blob object
   zip.createWriter(new zip.BlobWriter("application/zip"), function(zipWriter) {
      // use a BlobReader object to read the data stored into blob variable
      zipWriter.add(filename, new zip.BlobReader(blob), function() {
         // close the writer and calls callback function
         zipWriter.close(callback);
      });
   }, onerror);
}

Although this works, I don't understand why you need to specify a filename. Is this really necessary? And, is this file always removed after compression?

score 3 · Accepted Answer · edited May 23 '17 at 12:26

3

Check this answer here - it does not require a filename, and I'll bet its much easier to use. I've tried quite a few javascript compression/decompression implementations and have been stung by problems such as limits on size of original data, overall speed, efficiency, and so forth. It is oddly difficult to find a good compression/decompression implementation in javascript, but thankfully this one hasn't failed me yet (and I've used it quite a bit):

Compressing a blob in javascript

The implementation you have currently requires the filename because it is trying to be consistent with the zip, so that you can save it for example to a desktop and open it with your favorite zip utility. It sounds like your challenge is very similar to mine, I needed to save and restore compressed items out of local storage in the browser as well as on the server.

edited May 23 '17 at 12:26

Community

1
1

answered Jun 19 '13 at 03:06

Matt Mullens

2,266
15
14

very nice! Although the compression isn't as good as with zip.js, but still a very interesting alternative!! thnx – Jeanluca Scaljeri Jun 19 '13 at 11:28
My Pleasure Jeanluca, glad to hear it may be a potential alternative for you. Yes there are definitely many instances where zip is going to much out-perform LZJB from a compression perspective. On some kinds of data it will be about as equivalent; however, it is ultra-fast and if you're doing this browser-side speed is usually critical. And there is always that benefit of being easier to use for the developer, at least in my experience. Also there are a couple hidden base64 encode/decode methods in there that I didn't expose in the slightly modified version in the post if you need them. – Matt Mullens Jun 19 '13 at 11:49
Jeanluca, leaving a note here for you just in case - there was a typo in my example in that link, missing a semicolon after the declaration of fastcompressor object at the top. So just wanted you to be aware of that. I just fixed it there. – Matt Mullens Jun 19 '13 at 14:00

score 2 · Answer 2 · answered Apr 20 '15 at 03:02

The filename is necessary according to this implementation. It wouldn't be necessary if you were only compressing the data, but zip.js builds zip files, which store files, which must have filenames.

In your original example, zipWriter.add() effectively converts your blob into a new file and adds it to a zip – and the "filename" parameter is the name you want that new file to have.

Here's an example that uses zip.js to add multiple blobs to a zip and then downloads it with FileSaver.js:

function zipBlob() {
    zip.createWriter(new zip.BlobWriter("application/zip"), function(writer) {
        files = ["abcd", "123"];
        var f = 0;

        function nextFile(f) {
            fblob = new Blob([files[f]], { type: "text/plain" });
            writer.add("file"+f, new zip.BlobReader(fblob), function() {
                // callback
                f++;
                if (f < files.length) {
                    nextFile(f);
                } else close();
            });
        }

        function close() {
            // close the writer
            writer.close(function(blob) {
                // save with FileSaver.js
                saveAs(blob, "example.zip");
            });
        }

        nextFile(f);

    }, onerror);
}

Is there any other way than saveAs fileSaver library to save the Zip in JS? I am getting Content Security policy error with fileSaver saveAs. — aniltilanthe, Apr 10 '18 at 09:09

javascript - zip a Blob with zip.js

2 Answers2

Linked