使用angular下载zip文件

I'm trying to implement the download of a file through angular.js The file comes from the server in binary format, the content type is application/octet-stream

我正在尝试通过angular.js实现文件下载文件来自服务器的二进制格式,内容类型是application / octet-stream

The download is a GET using $resource. Looking at the parameter passed to the callback (called content below), it's an object containing the byte array and also a list of properties for $resource.

下载是使用$ resource的GET。查看传递给回调的参数(下面称为内容),它是一个包含字节数组的对象,也是$ resource的属性列表。

Tried several ways to serve the file, but without success.

尝试了几种方式来提供文件,但没有成功。

First of them:

首先是:

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

In this case, the content of the zip file is [object Object]

在这种情况下,zip文件的内容是[object Object]

I tried extracting the array from the object and joining everything into a string variable. The zip file in this case is way larger than the normal size. I had to set isArray: true in the service that calls $resource, otherwise there was no way to extract the byte content from the response object.

我尝试从对象中提取数组并将所有内容连接到字符串变量中。在这种情况下,zip文件大于正常大小。我必须在调用$ resource的服务中设置isArray:true,否则无法从响应对象中提取字节内容。

Here is how I did it:

我是这样做的:

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

Worth mentioning that calling encodeURI on str increments drastically the size of the downloaded zip, but the archive remains invalid.

值得一提的是,在str上调用encodeURI会大大增加下载zip的大小,但存档仍然无效。

I also tried creating a Blob from the str and setting the content type to application/octet-stream, without any luck.

我还尝试从str创建一个Blob并将内容类型设置为application / octet-stream,没有任何运气。

var blob = new Blob([str], {'type':"application/octet-stream"});
a.href = window.URL.createObjectURL(blob);
...

Don't know what I'm missing here, but it looks rather a problem of getting the right format for the byte array content and setting the correct href before simulating the click for downloading.

不知道我在这里缺少什么,但它看起来是一个问题,在模拟点击下载之前,为字节数组内容获取正确的格式并设置正确的href。

Help is appreciated.

感谢帮助。

Thanks

2 个解决方案

#1

I just found your post and fixed an answer using what you enlist.

我刚刚找到你的帖子,并使用你的名单修复了答案。

First you have to ensure that your angular $http request includes, like the following get example (include responseType: 'arraybuffer')

首先,您必须确保您的angular $ http请求包含,如下面的获取示例(包括responseType:'arraybuffer')
```
$http.get('/downloadZip', {
            params: {
                file: encodeURIComponent(filepath)
            },
            responseType: 'arraybuffer'
//your code
```
Second on your success or promise handler you should change your window.URL.createObjectURL(blob) to URL.createObjectURL(blob). Implementing something similar to the following:

在您的成功或承诺处理程序中,您应该将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();
```

With these you are creating a new anchor element and simulating to opening it. With a correct Blob creation since the request had been modified correctly.

通过这些,您将创建一个新的锚元素并模拟打开它。使用正确的Blob创建,因为请求已正确修改。

#2

Angular is no needed.

不需要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);

#1