diff --git a/examples/download-zip-file.html b/examples/download-zip-file.html index 93cd4b31..1d68ca2e 100644 --- a/examples/download-zip-file.html +++ b/examples/download-zip-file.html @@ -14,10 +14,12 @@

JSZip example : download the generated zip file

Tip : check the source of the page !

The data URL

+ Does not work in IE, has restrictions on the length.
click to download
-

The Blob URL

+

The Blob URL / saveAs

+ Works on firefox, chrome , opera >= 15 and IE >= 10 (but NOT in compatibility view).
click to download
@@ -26,15 +28,45 @@

The Blob URL

var zip = new JSZip(); zip.file("Hello.txt", "Hello world\n"); + function bindEvent(el, eventName, eventHandler) { + if (el.addEventListener){ + // standard way + el.addEventListener(eventName, eventHandler, false); + } else if (el.attachEvent){ + // old IE + el.attachEvent('on'+eventName, eventHandler); + } + } + // data URI - document.getElementById('data_uri').href = "data:application/zip;base64," + zip.generate(); + function downloadWithDataURI() { + dataUriLink.href = "data:application/zip;base64," + zip.generate({type:"base64"}); + dataUriLink.download = "hello.zip"; + } + var dataUriLink = document.getElementById('data_uri'); + bindEvent(dataUriLink, 'click', downloadWithDataURI); // Blob var blobLink = document.getElementById('blob'); - try { - blobLink.download = "hello.zip"; - blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"})); - } catch(e) { + var saveAs = window.saveAs || (navigator.msSaveBlob && navigator.msSaveBlob.bind(navigator)) + var blobDownloadSupported = JSZip.support.blob && (saveAs || window.URL && window.URL.createObjectURL); + if (blobDownloadSupported) { + function downloadWithBlob() { + try { + var blob = zip.generate({type:"blob"}); + if (saveAs) { + saveAs(blob, "hello.zip"); + } else { + blobLink.download = "hello.zip"; + blobLink.href = window.URL.createObjectURL(blob); + } + } catch(e) { + blobLink.innerHTML += " " + e; + } + return false; + } + bindEvent(blobLink, 'click', downloadWithBlob); + } else { blobLink.innerHTML += " (not supported on this browser)"; } })(); diff --git a/index.html b/index.html index aebb206a..73340926 100644 --- a/index.html +++ b/index.html @@ -221,13 +221,20 @@

Solution-ish: Downloadify< dataType: 'base64' }); -

Other solution-ish: Blob URL

-

With some recent browsers come a new way to download Blobs (a zip file for example) : blob urls. The download attribute on <a> allows you to give the name of the file. Blob urls start to be widely supported but this attribute is currently only supported in Chrome and Firefox (>= 20). See the example.

+

Other solution-ish: Blob URL / FileSaver / FileSaver.js

+

With some recent browsers come a new way to download Blobs (a zip file for example) : blob urls. The download attribute on <a> allows you to give the name of the file. Blob urls start to be widely supported but this attribute is currently only supported in Chrome and Firefox (>= 20). See the example. Note : on IE 10/11, using a blob url as a href doesn't seem to work.

 var blob = zip.generate({type:"blob"});
 myLink.href = window.URL.createObjectURL(blob);
 myLink.download = "myFile.zip";
+

An other solution is the FileSaver interface, created (at the time of writing) with saveAs. This works on Chrome and IE >= 10 (not in compatibility view) but not Firefox.

+
+var blob = zip.generate({type:"blob"});
+window.saveAs(blob, "hello.zip");
+ +

Finally, you can use the polyfill FileSaver.js which will use a FileSaver if present or else a blob url.

+

Usage with Google Gears

Franz Buchinger has written a brilliant tutorial on using JSZip with Google Gears (part 2). If you want to let your Gears users download several files at once I really recommend having a look at some of his examples.

@@ -245,15 +252,19 @@

Reading a local zip file (File API)

Documentation

-

new JSZip()

+

new JSZip() or JSZip()

Description :
The default constructor.
Returns :
A new JSZip.
+
+var zip = new JSZip();
+// same as
+var zip = JSZip();
-

new JSZip(data [,options])

+

new JSZip(data [,options]) or JSZip(data [,options])

Description :
Create a new JSZip file and load an existing zip file. See the documentation of load() for more details and this for the limitations.
@@ -266,6 +277,8 @@

new JSZip(data [,options])

 new JSZip(zipDataFromXHR, {base64:false});
 // same as
+JSZip(zipDataFromXHR, {base64:false});
+// same as
 var zip = new JSZip();
 zip.load(zipDataFromXHR, {base64:false});
@@ -624,10 +637,14 @@

From 1.x to 2.x

// before
 zip.file("test.txt").data;
 zip.files["test.txt"].data;
+zip.file("image.png").data;
+zip.files["image.png"].data;
 
 // after
 zip.file("test.txt").asText();
 zip.files["test.txt"].asText();
+zip.file("image.png").asBinary();
+zip.files["image.png"].asBinary();