Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #101 from dduponchel/update_doc

Update documentation
  • Loading branch information...
commit b5164686478c25db0eda4bee793fe7ca8807dd45 2 parents d39132e + 35b2657
@Stuk authored
Showing with 59 additions and 10 deletions.
  1. +38 −6 examples/download-zip-file.html
  2. +21 −4 index.html
View
44 examples/download-zip-file.html
@@ -14,10 +14,12 @@
<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 @@
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)";
}
})();
View
25 index.html
@@ -221,13 +221,20 @@
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 @@
<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 @@ <h2 id="migrating_guide">Migrating Guide</h2>
<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>
Please sign in to comment.
Something went wrong with that request. Please try again.