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.logs 检查过，但函数 getData() 似乎是甚至没有被调用，因为控制台日志没有被打印。

有人可以让我知道我在这里做错了什么吗？非常感谢任何帮助。

Answer 1

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

首先 : 当我们使用 HTTPClient 而不是 HTTP 时，我们应该像这样创建 headers :

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

headers object需要赋值回headers否则实际的headersobject为空

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

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

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

希望这对遇到类似问题的其他人有所帮助。

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

Angular 5 - How to use HTTPRespose.blob()?

excel

blob

httpresponse

httpclient

angular5