Download Ajax response as zip file?

I am trying to download multiple images as a zip file. As I am using Azure blob, first I listed all blobs then compressed it using Archiver and used pipe function to send it to the client. But I am getting zip as a raw file and it is not downloading. I am using Node js + Express.
Server-side script:

    function zipURLs(urls, outStream) {
  var zipArchive = archiver.create('zip');

  async.eachLimit(urls, 3, function(url, done) {
    console.log(url);
    var stream = request.get(url);

    stream.on('error', function(err) {
      return done(err);
    }).on('end', function() {
      return done();
    });

    // Use the last part of the URL as a filename within the ZIP archive.
    zipArchive.append(stream, { name : url.replace(/^.*\//, '') });
  }, function(err) {
    if (err) throw err;
    zipArchive.finalize();
    zipArchive.pipe(outStream);


  });
}
var data = {}; 
data.blob_name = value; 
console.log('downloading'); 
$.ajax({ 
    type: 'POST', 
    data: JSON.stringify(data),  
    contentType: 'application/json', 
    url: 'download/', 
    success: function(data) { console.log(data); }

Outstream is res. So I get data like this:-

enter image description here

How can I download directly as zip file using js?

Thanks

22 thoughts on “Download Ajax response as zip file?”

  1. (without ajax)
    You can use window location within Jquery click function for download zip file ……

     $(this).ready(function() {
            $("#downloadBtn").click(function() {
                var formdata= $("#formId").serialize();
                window.location="download.action?"+formdata;
            });
        });
    
    Reply
  2. There is a lot that goes into using ajax to download a file, first you have to be able to access the data in binary(not text which is the default) by setting the responseType to blob.
    Then you have to use actually get a way to get the download dialog to show up, below you can see the anchor with download attribute technique.

    jQuery.ajax({
            url:'download/',
            type:'POST',
            data: JSON.stringify(data),  
            contentType: 'application/json', 
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var anchor = document.getElementById('a');
                var url = window.URL || window.webkitURL;
                anchor.href = url.createObjectURL(data);
                anchor.download = 'archive.zip';
                document.body.append(anchor);
                anchor.click();
                setTimeout(function(){  
                    document.body.removeChild(anchor);
                    url.revokeObjectURL(anchor.href);
                }, 1};
            },
            error:function(){
    
            }
        });
    

    requires jQuery3+

    Reply

Leave a Comment