Angular 6 - Error using http.get responseType: ResponseContentType.Blob

Question

I'd like to make an observable like this in (angular 5). How can I declare responseType in Angular 6?

The Angular 5 code:

public ExportSomeThing(
        ano: number
    ): Observable<IDownloadArquivo> {
        let q = this.http
            .get(this.apiUrl + ano + '/pordia/excel', {
                responseType: ResponseContentType.Blob  // <<<-- This code
            }).map((res) => { 

My angular 6 code:

public MyExport(
    ano: number
  ): Observable<IXpto> {
    let q = this.http
      .get( this.api_rul + ano + '/some_path/', {
        responseType: "ResponseContentType.Blob"  // <<<--- error here !!!
      }).map((res) => {

The error is:

[ts]
Argument of type '{ responseType: "ResponseContentType.Blob"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'.
  Types of property 'responseType' are incompatible.
    Type '"ResponseContentType.Blob"' is not assignable to type '"json"'.

How can I make my http.get similar in Angular 6?

I'm trying to download Excel method!

Solution 1

Workaround Angular 8

Client Side:

 getBlob(url: string): Observable<Blob> {
        return this.http.get<Blob>(url, { observe: 'body', responseType: 'blob' as 'json' })
 }

Note the 'blob' as 'json' trick

Server Side returns byte[]:

@GetMapping(value = "/api/someApi")
public @ResponseBody byte[] GetBlob() {

     byte[] ret  = this.service.getData();
     return ret; 
}

Solution 2

Very good explanation is given here. Try below code

  public getRequest(urlPath: string): Observable<any> {

    const options = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Authorization': token  // if you have to give token
        }),

        // Ignore this part or  if you want full response you have 
        // to explicitly give as 'boby'as http client by default give res.json()
        observe:'response' as 'body',

       // have to explicitly give as 'blob' or 'json'
        responseType: 'blob' as 'blob'  
    };

     // resObj should be of type Blob
    return this.http.get(urlPath, options)
        .map((resObj: Blob) => resObj)
        .catch((errorObj: any) => Observable.throw(errorObj || 'Server error'));
}

Solution 3

This is how we can add responseType in Angular 6+ versions,

const httpOptions = {
     headers: new HttpHeaders({
     'Content-Type': 'application/json'
     }),
     observe: 'response' as 'body',
     responseType: 'blob' as 'blob'
};

return this.httpClient.get("API_URL", httpOptions);

For more, you can refer here.

Solution 4

Replace "ResponseContentType.Blob" by 'blob'

this.http.get( this.api_rul + ano + '/some_path/', {
    responseType: 'blob'
  }).map((res) => {})

View more solutions