Angular 5-如何使用HTTPRespose.blob()

Question

在Angular 4中，我曾经通过Angular 4 http库进行http get或post调用，将任何excel或pdf文件下载为blob。

我在Angular 4中的代码曾经是这样的：

import { Http, Response, Headers, RequestOptions,ResponseContentType   } from '@angular/http';
...................................
getExcelOrPDF(URL: string) {
let headers = new Headers();
headers.append('Content-Type', 'application/json' );        
return this.http.get(URL, {headers: headers, responseType: ResponseContentType.Blob
}).map(response => this.getData(response)) .catch(error => this.handleError(error));
}



public getData(res: Response) {
console.log("getData()---Enter");
let headers = res.headers;
let contentType = headers.get('Content-Type');
var blob;
try {
if(contentType === 'pdf' || contentType === 'application/pdf') {
blob = new Blob([res.blob()], { type: "application/pdf"});
} else {
blob = new Blob([res.blob()], { type: "application/vnd.ms-excel"});
}
}
catch (e) {
console.debug(e);
}
console.log("getData()-Exit");
return blob;
}

现在，我们都知道在Angular 5中，我们支持HTTPClient模块和HTTPClient，我正试图摆脱Angular 4获取数据的方式。所以，我已经导入了HTTPClient、HTTPResponse等

我在Angular 5中的代码如下：

import { HttpClient, HttpResponse , HttpHeaders} from '@angular/common/http';
...................................
getExcelOrPDF(URL: string) {
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json' );        
return this.http.get(URL, {headers : headers, responseType: 'blob' as 'json'
}).map(response => this.getData(response)) .catch(error => this.handleError(error));
}



public getData(res: HttpResponse<any>) {
console.log("getData()---Enter");
let headers = res.headers;
let contentType = headers.get('Content-Type');
var blob;
try {
if(contentType === 'pdf' || contentType === 'application/pdf') {
blob = new Blob([res.blob()], { type: "application/pdf"});
} else {
blob = new Blob([res.blob()], { type: "application/vnd.ms-excel"});
}
}
catch (e) {
console.debug(e);
}
console.log("getData()-Exit");
return blob;
}

然而，在angular 4代码完美运行的情况下，angular 5中的上述代码给了我几个错误：

• res.blob((-->使用HTTPResponse，我得到错误：blob() function is not supported。这是我看到的一个错误编辑本身
• 当代码运行时，它会成功编译，但当我尝试下载excel，我得到错误：unsupported media type : 415
• 我使用console.log进行了检查，但函数getData((似乎是甚至没有被调用，因为控制台日志没有打印出来

有人能告诉我我在这里做错了什么吗？我们非常感谢您的帮助。

Answer 1

我犯了一个愚蠢的错误，因此我面临着很多问题。

首先：当我们使用HTTPClient而不是HTTP时，我们应该创建这样的头：

let headers = new HttpHeaders();
headers  = headers.append('Content-Type', 'application/json' );

headers对象必须分配回headers，否则实际的headers对象将为空。

其次：进行如下http调用：this.http.get(URL, {headers : headers, observe: 'response', responseType: 'blob'}

第三：res.blob()在HTTPResponse中不可用。相反，我们应该使用：res.body

在浏览了互联网上数百篇文档和文章，以及无数次的尝试和错误之后，我找到了一个令人满意的解决方案。

希望这能帮助到其他正在经历类似问题的人。