从 Angular 2/TypeScript 中的 AJAX 响应保存 ZIP 文件答案

【问题标题】：Saving a ZIP File from AJAX Response in Angular 2/TypeScript从 Angular 2/TypeScript 中的 AJAX 响应保存 ZIP 文件
【发布时间】：2017-11-30 11:39:34
【问题描述】：

我正在尝试下载一个 zip 文件，该文件在 AJAX 请求的响应中以二进制形式返回。

我尝试了以下代码，但无法下载它，即使我下载了它，文件也已损坏。我检查了响应是否正确，然后转到开发人员工具中的网络选项卡，将响应保存为 zip 文件并打开它，打开成功。希望有人能告诉我我做错了什么。

  var URL = window.URL;

  var downloadData = new Blob([data._body], { type: 'application/octet-stream' });

  var downloadURL = URL.createObjectURL(downloadData);

  window.open(downloadURL);

浏览器打开一个新窗口并告诉我 IE 不支持该文件并在 Chrome 中下载损坏的文件。浏览器中的 URL 类似于

blob:http://localhost:4200/62b8283c-1391-4133-98a4-ed3cc9aa1f73

      var downloadData = new Blob([data._body], { type: 'application/zip' });

  FileSaver.saveAs(downloadData,"hi.zip");

上面的代码没有给出任何具体的错误，但是当文件被保存时它被损坏了。我也尝试了上面的代码，类型为application/octet-stream，但结果相同。

二进制数据似乎非常好，我唯一需要做的就是打开一个保存对话框，它将保存二进制数据。似乎是一个非常简单的用例，但在 Js/TS 端使用 zip 时似乎有点混乱。我认为主要问题是我正在使用二进制数据创建一个 blob（我认为我不需要或不应该将其转换为 blob）但我无法在不创建 blob 对象的情况下触发下载API 似乎只接受 blob（如 URL 对象或 FileSaver API）。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/37046133/…

标签： ajax angular typescript download

【解决方案1】：

我遇到了完全相同的问题，当我试图打开它时，zip 文件已损坏。我通过添加来修复它： responseType = ResponseContentType.ArrayBuffer

这是我的代码：

public httpRequest(call) {
call.headers = new Headers({
  'Authorization': 'Bearer ' + localStorage.getItem('id_token'),
  'Content-Type': 'application/json',
  'Accept': 'application/octet-stream'
});

let req = new Request(call);
req.responseType = ResponseContentType.ArrayBuffer;

return this.http.request(req).map((res: Response) => {
  return res;
});

}

确保您已导入：

import { Http, Headers, Request, Response, BaseResponseOptions, ResponseContentType } from '@angular/http';

【讨论】：