Javascript 使用angular下载zip文件

我试图通过angular.js实现文件下载 文件以二进制格式来自服务器，内容类型为

application/octet-stream

下载是使用

$resource

获取的。查看传递给回调的参数（下面称为

content

），它是一个包含字节数组的对象，也是

$resource

的属性列表

尝试了几种方法来提供文件，但没有成功

首先:

...
var a = document.createElement('a');
a.href = "data:attachment/zip," + content;
a.download = zipName;
a.click();

在这种情况下，zip文件的内容是

[object object]

我尝试从对象中提取数组，并将所有内容合并到字符串变量中。本例中的zip文件比正常大小大很多。我必须在调用

$resource

的服务中设置

isArray:true

，否则无法从响应对象提取字节内容

我是这样做的：

var str = '';
for (var i = 0; i < content.length; i++) {
   str += content[i][0];
}

...
var a = document.createElement('a');
a.href = "data:attachment/zip," + str;
a.download = zipName;
a.click();

我不知道我在这里遗漏了什么，但在模拟单击下载之前，获取字节数组内容的正确格式并设置正确的

href

似乎是个问题

谢谢你的帮助

---

谢谢

我刚刚找到了你的帖子，并用你登记的内容修复了一个答案

• 首先，您必须确保$http请求包括，如下面的get示例（

  include responseType:'arraybuffer'

  ）

• 第二，在您的成功或承诺处理程序中，您应该将

  window.URL.createObjectURL（blob）

  更改为

  URL.createObjectURL（blob）

  。实现与以下类似的功能：

  var a = document.createElement('a');
  var blob = new Blob([data], {'type':"application/octet-stream"});
  a.href = URL.createObjectURL(blob);
  a.download = "filename.zip";
  a.click();
  

通过这些，您可以创建一个新的锚元素并模拟打开它。由于请求已被正确修改，因此创建了正确的Blob。

无需使用Angular

var zip_file_path = "" //put inside "" your server path with file.zip
var zip_file_name = "" //put inside "" file name or something
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = zip_file_path;
a.download = zip_file_name;
a.click();
document.body.removeChild(a);

---

如果有人仍在AngularJS上（像我一样）并想这样做，我接受了David的答案，并使其与angular$资源一起工作，而不是直接使用较低级别的$http。如果您使用$resource，这将有助于您：

    var myReportingResource = $resource(baseURL + '/mypath/:command', {},{
        getExportZip: {
            method: 'GET',
            params: {
                command: 'exportzip'
            },
            responseType: 'arraybuffer',
            // don't try to convert the zip to JSON
            // instead take the data that comes back and put it in an object under a content key
            transformResponse: function(data){
                return {content: data};
            }
        }
    });

    // call the resource like this
    myReportingResource.getExportZip(yourParams).$promise.then(function(zipData){
            // create a anchor element, stick the zip data in it, and click it to download
            var anchor = angular.element('<a/>');
            anchor.attr({
                href: URL.createObjectURL(new Blob([zipData.content], {'type':'application/octet-stream'})),
                download: 'myfilename.zip'
            })[0].click();

        });

var myReportingResource=$resource（baseURL+'/mypath/：command'，{}{
getExportZip：{
方法：“GET”，
参数：{
命令：“exportzip”
},
响应类型：'arraybuffer'，
//不要尝试将zip转换为JSON
//取而代之的是将返回的数据放在内容键下的对象中
transformResponse：功能（数据）{
返回{content:data}；
}
}
});
//像这样调用资源
myReportingResource.getExportZip（yourParams）。$promise.then（函数（zipData）{
//创建一个锚元素，将zip数据粘贴在其中，然后单击它进行下载
var anchor=角度元素（“”）；
anchor.attr({
href:URL.createObjectURL（新Blob（[zipData.content]，{'type'：'application/octet stream'}）），
下载：“myfilename.zip”
})[0]。单击（）；
});

您需要

transformResponse

位，否则AngularJS会将您的响应转换为JSON，这对于二进制数据来说是错误的。这就是为什么以后要使用

zipData.content

将数据传递到Blob中。您可以去掉

内容

部分，这是为了简化我的错误处理代码

---

自2019年5月起，Chrome和Safari均适用。没有在其他地方进行测试。

请记住，IE11可能会导致下载问题

var zip_file_path = "" //put inside "" your server path with file.zip
var zip_file_name = "" //put inside "" file name or something
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = zip_file_path;
a.download = zip_file_name;
a.click();
document.body.removeChild(a);

    var myReportingResource = $resource(baseURL + '/mypath/:command', {},{
        getExportZip: {
            method: 'GET',
            params: {
                command: 'exportzip'
            },
            responseType: 'arraybuffer',
            // don't try to convert the zip to JSON
            // instead take the data that comes back and put it in an object under a content key
            transformResponse: function(data){
                return {content: data};
            }
        }
    });

    // call the resource like this
    myReportingResource.getExportZip(yourParams).$promise.then(function(zipData){
            // create a anchor element, stick the zip data in it, and click it to download
            var anchor = angular.element('<a/>');
            anchor.attr({
                href: URL.createObjectURL(new Blob([zipData.content], {'type':'application/octet-stream'})),
                download: 'myfilename.zip'
            })[0].click();

        });