Creating Zip file with Javascript (JSZip) not working in IE and Safari

codebreaker picture codebreaker · Apr 27, 2013 · Viewed 8k times · Source

I have some files and after fetching them i convert them into zip using JSZip, but this is not working in Internet Explorer and Safari as JSZip does not work in IE with URLs for some content.

var zip = new JSZip();
var linkArr=$(xml1).find('groupnode:eq('+id_no+')').find('link');
var linklength = $(linkArr).length;

for(i=0;i<linklength;i++)
{
    zip.file("../resources"+$(linkArr[i]).attr('src'),$(linkArr[i]).text());
} 

content = zip.generate();
location.href="data:application/zip;base64," + content;

Do you know of any other solutions that offer cross browser support?

Answer

Daniel Waters picture Daniel Waters · May 19, 2013

http://stuk.github.io/jszip/

Great deal of cross browser support, including IE and Safari, the problem lies within your code or URL's. I'd tailor your URL's and investigate other code that may be causing issues before switching to another solution.

Also read the section on filename problems in the URL I provided:

"Filename problems
The biggest issue with JSZip is that the filenames are very awkward, Firefox generates filenames such as a5sZQRsx.zip.part (see bugs 367231 and 532230), and Safari isn't much better with just Unknown. Sadly there is no pure Javascript solution (and working in every browsers) to this. However...

Solution-ish: Downloadify

Downloadify uses a small Flash SWF to download files to a user's computer with a filename that you can choose. Doug Neiner has added the dataType option to allow you to pass a zip for downloading. Follow the Downloadify demo with the following changes:

zip = new JSZip();
zip.add("Hello.", "hello.txt");
Downloadify.create('downloadify',{
...
  data: function(){
    return zip.generate();
  },
...
  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.

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