Merge pull request #101 from dduponchel/update_doc

Update documentation

examples/download-zip-file.html

@@ -14,10 +14,12 @@ <h1><a href="../">JSZip</a> example : download the generated zip file</h1>
 <p>Tip : check the source of the page !</p>
 <h2>The data URL</h2>
 <div>
+  Does not work in IE, has restrictions on the length.<br/>
   <a href="#" id="data_uri">click to download</a>
 </div>
-<h2>The Blob URL</h2>
+<h2>The Blob URL / saveAs</h2>
 <div>
+  Works on firefox, chrome , opera &gt;= 15 and IE &gt;= 10 (but NOT in compatibility view).<br/>
   <a href="#" id="blob">click to download</a>
 </div>
 <script type="text/javascript" src="../dist/jszip.js"></script>
@@ -26,15 +28,45 @@ <h2>The Blob URL</h2>
   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)";
   }
 })();

index.html

@@ -221,13 +221,20 @@ <h4>Solution-ish: <a href="https://github.com/dcneiner/downloadify">Downloadify<
   dataType: 'base64'
 });</pre>
 
-      <h4>Other solution-ish: Blob URL</h4>
-      <p>With <a href="http://caniuse.com/bloburls">some recent browsers</a> come a new way to download Blobs (a zip file for example) : blob urls. The <a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">download attribute on &lt;a&gt;</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 <a href="examples/download-zip-file.html">the example</a>.</p>
+      <h4>Other solution-ish: Blob URL / FileSaver / FileSaver.js</h4>
+      <p>With <a href="http://caniuse.com/bloburls">some recent browsers</a> come a new way to download Blobs (a zip file for example) : blob urls. The <a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">download attribute on &lt;a&gt;</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 <a href="examples/download-zip-file.html">the example</a>. Note : on IE 10/11, using a blob url as a href doesn't seem to work.</p>
       <pre class="example">
 var blob = zip.generate({type:"blob"});
 myLink.href = window.URL.createObjectURL(blob);
 myLink.download = "myFile.zip";</pre>
 
+      <p>An other solution is the <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, created (at the time of writing) with <code>saveAs</code>. This works on Chrome and IE &gt;= 10 (not in compatibility view) but not Firefox.</p>
+      <pre class="example">
+var blob = zip.generate({type:"blob"});
+window.saveAs(blob, "hello.zip");</pre>
+
+      <p>Finally, you can use the polyfill <a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> which will use a FileSaver if present or else a blob url.</p>
+
       <h3>Usage with Google Gears</h3>
       <p>
       <a href="http://www.picurl.org/blog/author/franz/">Franz Buchinger</a> has written a brilliant tutorial on <a href="http://www.picurl.org/blog/2009/11/22/creating-zip-archives-with-gears/">using JSZip with Google Gears</a> (<a href="http://www.picurl.org/blog/2009/11/29/gearszipper-part2-adding-support-for-real-files-and-canvas-elements/">part 2</a>). If you want to let your Gears users download several files at once I really recommend having a look at some of his <a href="http://picurl.org/gears/zipper/">examples</a>.</p>
@@ -245,15 +252,19 @@ <h3>Reading a local zip file (File API)</h3>
 
       <h2 style="margin-top: 2em;">Documentation</h2>
 
-      <h4 id="doc_new_JSZip">new JSZip()</h4>
+      <h4 id="doc_new_JSZip">new JSZip() or JSZip()</h4>
       <dl>
         <dt>Description : </dt>
         <dd>The default constructor.</dd>
         <dt>Returns : </dt>
         <dd>A new JSZip.</dd>
       </dl>
+      <pre class="example">
+var zip = new JSZip();
+// same as
+var zip = JSZip();</pre>
 
-      <h4 id="doc_new_JSZip_data_options">new JSZip(data [,options])</h4>
+      <h4 id="doc_new_JSZip_data_options">new JSZip(data [,options]) or JSZip(data [,options])</h4>
       <dl>
         <dt>Description : </dt>
         <dd>Create a new JSZip file and load an existing zip file. See the documentation of <a href="#doc_load_data_options"><code>load()</code></a> for more details and <a href="#zip_load_limits">this</a> for the limitations.</dd>
@@ -266,6 +277,8 @@ <h4 id="doc_new_JSZip_data_options">new JSZip(data [,options])</h4>
       <pre class="example">
 new JSZip(zipDataFromXHR, {base64:false});
 // same as
+JSZip(zipDataFromXHR, {base64:false});
+// same as
 var zip = new JSZip();
 zip.load(zipDataFromXHR, {base64:false});</pre>
 
@@ -624,10 +637,14 @@ <h3>From 1.x to 2.x</h3>
          <pre>// 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();
       </p>
    </div>