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

2 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