From 62995090d9d752a774d020c0ee64771b38e5bcbf Mon Sep 17 00:00:00 2001 From: David Duponchel Date: Sat, 15 Feb 2014 19:15:16 +0100 Subject: [PATCH 1/6] update the example to work with IE 10/11 --- examples/download-zip-file.html | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/examples/download-zip-file.html b/examples/download-zip-file.html index 93cd4b31..80cf9978 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.
click to download
@@ -27,14 +29,32 @@

The Blob URL

zip.file("Hello.txt", "Hello world\n"); // data URI - document.getElementById('data_uri').href = "data:application/zip;base64," + zip.generate(); + var dataUriLink = document.getElementById('data_uri'); + dataUriLink.onclick = function () { + dataUriLink.href = "data:application/zip;base64," + zip.generate({type:"base64"}); + dataUriLink.download = "hello.zip"; + } // 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) { + blobLink.onclick = function () { + 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; + }; + } else { blobLink.innerHTML += " (not supported on this browser)"; } })(); From 159dda7d087970de3124272a2429c9d5a1ecc996 Mon Sep 17 00:00:00 2001 From: David Duponchel Date: Sat, 15 Feb 2014 20:35:28 +0100 Subject: [PATCH 2/6] update documentation for blob url See Stuk/jszip#96 : we still don't have a solid, cross brower way to download the zip file... --- index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index aebb206a..7ad86fe8 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 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.

From 98c728116cb2a7816946170fe53a35fea538042c Mon Sep 17 00:00:00 2001 From: David Duponchel Date: Tue, 18 Feb 2014 20:59:22 +0100 Subject: [PATCH 3/6] doc : add a note about IE's compatibility view --- examples/download-zip-file.html | 2 +- index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/download-zip-file.html b/examples/download-zip-file.html index 80cf9978..ce37b913 100644 --- a/examples/download-zip-file.html +++ b/examples/download-zip-file.html @@ -19,7 +19,7 @@

The data URL

The Blob URL / saveAs

- Works on firefox, chrome , opera >= 15 and IE >= 10.
+ Works on firefox, chrome , opera >= 15 and IE >= 10 (but NOT in compatibility view).
click to download
diff --git a/index.html b/index.html index 7ad86fe8..4e1e7dcf 100644 --- a/index.html +++ b/index.html @@ -228,7 +228,7 @@

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

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 but not Firefox.

+

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");
From 973b44a9f62c097c7f33e68e94ff24d073980758 Mon Sep 17 00:00:00 2001 From: David Duponchel Date: Tue, 18 Feb 2014 21:03:04 +0100 Subject: [PATCH 4/6] migration guide : add .asBinary() to the example Fix issue #100 : the migration guide said that the equivalent of .data is .asText() but the utf8 conversion is not always welcomed. --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 4e1e7dcf..6e374976 100644 --- a/index.html +++ b/index.html @@ -631,10 +631,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();
       

    
 

From 86c4cb4d17ceaac949d3a36537cc66dde8164a0c Mon Sep 17 00:00:00 2001
From: David Duponchel 
Date: Thu, 20 Feb 2014 21:21:39 +0100
Subject: [PATCH 5/6] use addEventListener instead of onclick

Also use attachEvent as a fallback. This page will only works with
everything but old IE so this fallback will only be useful to display
error messages in IE 8 :)
---
 examples/download-zip-file.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/download-zip-file.html b/examples/download-zip-file.html
index ce37b913..1d68ca2e 100644
--- a/examples/download-zip-file.html
+++ b/examples/download-zip-file.html
@@ -28,19 +28,30 @@ 
The Blob URL / saveAs

   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
-  var dataUriLink = document.getElementById('data_uri');
-  dataUriLink.onclick = function () {
+  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');
   var saveAs = window.saveAs || (navigator.msSaveBlob && navigator.msSaveBlob.bind(navigator))
   var blobDownloadSupported = JSZip.support.blob && (saveAs || window.URL && window.URL.createObjectURL);
   if (blobDownloadSupported) {
-    blobLink.onclick = function () {
+    function downloadWithBlob() {
       try {
         var blob = zip.generate({type:"blob"});
         if (saveAs) {
@@ -53,7 +64,8 @@ 
The Blob URL / saveAs

         blobLink.innerHTML += " " + e;
       }
       return false;
-    };
+    }
+    bindEvent(blobLink, 'click', downloadWithBlob);
   } else {
     blobLink.innerHTML += " (not supported on this browser)";
   }

From 35b2657e9af9272b07cbca10029eaab8c48df400 Mon Sep 17 00:00:00 2001
From: David Duponchel 
Date: Sat, 22 Feb 2014 17:09:15 +0100
Subject: [PATCH 6/6] documentation about the optional `new` operator

See #93 for more informations.
---
 index.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 6e374976..73340926 100644
--- a/index.html
+++ b/index.html
@@ -252,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.

@@ -273,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});