Pass responseType: 'blob' via post request in Angular

3
votes

I am passing responseType: 'blob' via get request. It works well.

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { RequestOptions, Response, ResponseContentType } from '@angular/http';


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

return this.http.get(url, {
    headers: headers,
    responseType: 'blob'
}

How to pass same responseType via post request?

I tried :

const headers = new Headers({ 
    'Content-Type': 'application/pdf'
});

const options = new RequestOptions({headers: headers});
options.responseType = ResponseContentType.Blob;

return this.http.post(url, body, options)

but it doesnt work. I have error message: Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'.

UPD Following comments bellow i've remade request: 

   const headers = new HttpHeaders({ 'Content-Type': 'application/pdf'});
    return this.http.post(url, body, { headers, responseType:'blob' })

It works well! Thanks a lot!

4
angular
Why do you think it should be different than with a get? What does the docupentation say? angular.io/api/common/http/HttpClient#post - JB Nizet
Your RequestOptions, Response, ResponseContentType is from the deprecated @angular/http module, but you're using the HttpClient module instead. Make sure your importing the correct files - user184994
I tried apply logic as in get request but it doesnt work : post(url, body, { headers: headers, responseType: "blob" }) - Lex
Define "doesn't work". - JB Nizet
Note, BTW, that passing a content-type header in a get is useless: a get request doesn't have a content, so it doesn't have a content-type. - JB Nizet

4 Answers

4
votes

Use

responseType:'blob' as 'json'

References:

1
votes

You dont need '@angular/http' and its references. its not required.Use only '@angular/common/http'

   options.responseType = 'blob'
1
votes

You need to use is as json,

responseType:'blob' as 'json'
0
votes

For more common cases you can also use http interceptor. For instance:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class SomeInterceptService implements HttpInterceptor {
  
  // intercept request and parse custom response
  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let customRequest;
    const dataUrl = {
     someUrl: '/api/someUrl',
    };

 
    for (const url in dataUrl ) {
      if (dataUrl .hasOwnProperty(url)) {
        customRequest = request.url.includes(dataUrl [url])
          ? request.clone({
              ...request,
              responseType: 'blob',
            })
          : request;
      }
    }

    return next.handle(customRequest).pipe(
      map((response: HttpResponse<any>) => {
        if (response instanceof HttpResponse) {
          return response;
        }
      })
    );
  }
}