How to receive blob responses using Angular's 2+ @angular/http module?

Question

I'm trying to provide a pdf download from within an angular 2 app...

this code works:

    var reportPost = 'variable=lsdkjf';

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost/a2/pdf.php", true);
    xhr.responseType = 'blob';
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {//Call a function when the state changes.
        if(xhr.readyState == 4 && xhr.status == 200) {
            var blob = new Blob([this.response], {type: 'application/pdf'});
            saveAs(blob, "Report.pdf");
        }
    }

    xhr.send(reportPost);

but i would have liked to use angular 2's built-in Http client.

a little research:

angular docs unwritten at time of posting: https://angular.io/docs/js/latest/api/http/ResponseTypes-enum.html
not sure if this applies, but the rxjs responseType parameter seems to include only text and json: https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/ajax.md

and some test code:

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post('http://localhost/a2/pdf.php', reportPost,  {
        headers: headers
        })
        .retry(3)
        // .map( (res:any) => res.blob() ) // errors out
        .subscribe(
          (dataReceived:any) => {
            var blob = new Blob([dataReceived._body], {type: 'application/pdf'});
            saveAs(blob, "Report.pdf");
          },
          (err:any) => this.logError(err),
          () => console.log('Complete')
        );

ps. the saveAs function comes from here: https://github.com/eligrey/FileSaver.js

Seems like the blob()-method isn't implemented yet. See github.com/angular/angular/blob/master/modules/angular2/src/…. An issue tracking the implementation status can be found here: github.com/angular/angular/issues/2803 — Larrifax
– Larrifax, Commented Dec 8, 2015 at 21:38
How in the world did you get "saveAs" to work? I've installed the module, installed the typings, and still get "no such function: saveAs" when I run it.. sooooo annoying... how do you include it in the typescript code? (i use webpack, still haven't figured it out) — Spock
– Spock, Commented Mar 29, 2016 at 14:21
i've just been ignoring the error from the TS compiler. it still compiles... sloppy huh? — ryanrain
– ryanrain, Commented Mar 30, 2016 at 1:26

starball · Accepted Answer · 2022-12-27 00:44:41Z

60

With the release of Angular2 final we can define for example a service:

@Injectable()
export class AngularService {

    constructor(private http: Http) {}

    download(model: MyModel) { //get file from service
        this.http.post("http://localhost/a2/pdf.php", JSON.stringify(model), {
            method: RequestMethod.Post,
            responseType: ResponseContentType.Blob,
            headers: new Headers({'Content-Type', 'application/x-www-form-urlencoded'})
        }).subscribe(
            response => { // download file
                var blob = new Blob([response.blob()], {type: 'application/pdf'});
                var filename = 'file.pdf';
                saveAs(blob, filename);
            },
            error => {
                console.error(`Error: ${error.message}`);
            }
        );
    }
}

This service will get the file and then serve it to a user.

Example for zip file: How to use JAX-RS and Angular 2+ to download a zip file

edited Dec 27, 2022 at 0:44

starball♦

59k52 gold badges310 silver badges1k bronze badges

answered Sep 25, 2016 at 19:15

Sergio

3,3976 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gal Over a year ago

thanks ! i missed the responseType: ResponseContentType.Blob.

arvstracthoughts Over a year ago

can someone mark this as the correct answer please, I've been looking for this in ages.

Chris Fremgen Over a year ago

import {ResponseContentType } from '@angular/http';

Ivan Zverev Over a year ago

I had to use http.get(url, <any>{responseType: "application/octet-stream"}), because http.get did not recognize responseType of type ResponseContentType, and requires string. And you can't set other string than "json" so I had to fool TS compiler.

Mr. Wizard Over a year ago

I get this error [ts] Property 'blob' does not exist on type 'Blob'. anyone knows why?

sabithpocker · Accepted Answer · 2017-11-22 16:38:31Z

17

With @4.3, @5 and HttpClientModule, I ended up doing:

this.http.post(`${environment.server}/my/download`,
                data, 
                {responseType: 'blob', observe: 'response'})
              .map( res => ({content: res.body, 
                             fileName: res.headers.get('content-filename')}));

edited Nov 22, 2017 at 16:38

answered Oct 30, 2017 at 12:44

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

Comments

Felix · Accepted Answer · 2017-11-07 14:58:15Z

2

See here: https://stackoverflow.com/a/45666313/4420532

return this._http.get('/api/images/' + _id, {responseType: 'blob'}).map(blob => {
  var urlCreator = window.URL;
  return this._sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
})

answered Nov 7, 2017 at 14:58

Felix

4,6353 gold badges51 silver badges73 bronze badges

Collectives™ on Stack Overflow

How to receive blob responses using Angular's 2+ @angular/http module?

3 Answers 3

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Linked

Related