javascript - 使用 Angular 下载 zip 文件

Question

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

下载是使用 $resource 的 GET 方式。查看传递给回调的参数(下面称为 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();

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

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

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

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

感谢帮助。

谢谢

Answer 1

我刚刚找到了您的帖子并使用您列出的内容修复了答案。

• 首先，您必须确保您的 Angular $http 请求包含，如以下 get 示例 (include responseType: 'arraybuffer')

  $http.get('/downloadZip', {
              params: {
                  file: encodeURIComponent(filepath)
              },
              responseType: 'arraybuffer'
  //your code
  

• 在成功或 promise 处理程序之后，您应该将 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();
  

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