Saving Blob as xlsx in Angular2

Question

I have some problems keeping xlsx in my Angular2 application:

 this._http.get('/api/file).subscribe(success=>{ var blob = new Blob([success.json()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); var downloadUrl= window.URL.createObjectURL(blob); window.open(downloadUrl); }, error=>{ }); 

The answer I get from the backend has the following form:

 PK q H_rels/.rels   j 0  }  {㴃1F ^Ơ 2  l%1I,c [  3 l l     H  4  R l  ·    q}* 2       ; *   t" ^ l;1W) N iD)ejuD cKz[׷:}g    @: .... etc 

Any ideas I'm wrong about?

Answer 1

The problem is that the contents of the binary response are not supported out of the box. You need to manually set the response type to the underlying XHR object

As a workaround, you need to extend the BrowserXhr BrowserXhr class as described below to set responseType in blob to the underlying xhr object:

 import {Injectable} from 'angular2/core'; import {BrowserXhr} from 'angular2/http'; @Injectable() export class CustomBrowserXhr extends BrowserXhr { constructor() {} build(): any { let xhr = super.build(); xhr.responseType = "blob"; return <any>(xhr); } } 

Be careful when registering this class with suppliers, as it is global. You should install it only inside the component executing the request. In this case, you will get a string representation of the response data ...

 @Component({ (...) providers: [ provide(BrowserXhr, { useClass: CustomBrowserXhr }) ] }) export class ... 

Then you need to get the data from the _body property of the response object. You should use it normally since it is internal, but there is no other way right now:

 this._http.get('/api/file).subscribe(success => { var blob = new Blob([success._body], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); var downloadUrl= window.URL.createObjectURL(blob); window.open(downloadUrl); }, error=>{ (...) }); 

See this question for more information:

• Angular 2 download PDF from API and display it in view mode