下载Ajax响应作为zip文件?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下载Ajax响应作为zip文件?相关的知识,希望对你有一定的参考价值。

我试图将多个图像下载为zip文件。当我使用Azure blob时,首先列出所有blob然后使用Archiver对其进行压缩并使用管道函数将其发送到客户端。但我得到zip作为原始文件,它不下载。我正在使用Node js + Express。服务器端脚本:

    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是res。所以我得到这样的数据: -

enter image description here

如何使用js直接下载为zip文件?

谢谢

答案

使用ajax下载文件有很多,首先你必须能够通过将responseType设置为blob来访问二进制数据(而不是默认文本)。然后你必须使用实际上获得一个方法来显示下载对话框,下面你可以看到带有下载属性技术的锚点。

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(){

        }
    });

需要jQuery3 +

以上是关于下载Ajax响应作为zip文件?的主要内容,如果未能解决你的问题,请参考以下文章

在 Ajax 成功时强制下载 .mp3 或 .zip 文件

下载 csv 文件作为对 AJAX 请求的响应

Ajax发布表单和下载文件作为响应

C# WEB API 响应下载 0 大小的文件

处理从 ajax post 下载的文件

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]