Angular 5 Download Excel File With Post Request

Answer :

I struggle with this one all day. Replace angular HttpClient and use XMLHttpRequest as follows:

var oReq = new XMLHttpRequest();   oReq.open("POST", url, true);   oReq.setRequestHeader("content-type", "application/json");   oReq.responseType = "arraybuffer";    oReq.onload = function (oEvent) {     var arrayBuffer = oReq.response;     if (arrayBuffer) {       var byteArray = new Uint8Array(arrayBuffer);       console.log(byteArray, byteArray.length);       this.downloadFile(byteArray, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'export.xlsx');     }   };    oReq.send(body); 

Then modified the creation of the Blob in your downloadFile function:

const url = window.URL.createObjectURL(new Blob([binaryData])); 

In your case the service will look something like this:

DownloadData(model:requiredParams):Observable<any>{   return new Observable(obs => {     var oReq = new XMLHttpRequest();     oReq.open("POST", url, true);     oReq.setRequestHeader("content-type", "application/json");     oReq.responseType = "arraybuffer";      oReq.onload = function (oEvent) {       var arrayBuffer = oReq.response;       var byteArray = new Uint8Array(arrayBuffer);       obs.next(byteArray);     };      const body = JSON.stringify(model);     oReq.send(body);   }); } 

Then the component:

exportToExcel() {   this.loadingOverlayFlag = true;   this.podashboardService.DownloadData(this.data).subscribe(result=>{     // console.log(result);     this.downloadFile(result,'application/vnd.openxmlformats-     officedocument.spreadsheetml.sheet', 'export.xlsx');   }) }  downloadFile(blob: any, type: string, filename: string) {    var binaryData = [];   binaryData.push(blob);    const url = window.URL.createObjectURL(new Blob(binaryData, { type: filetype })); // <-- work with blob directly     // create hidden dom element (so it works in all browsers)    const a = document.createElement('a');    a.setAttribute('style', 'display:none;');    document.body.appendChild(a);     // create file, attach to hidden element and open hidden element    a.href = url;    a.download = filename;    a.click(); } 

I managed to make it working by using httpClient ( responseType: 'arraybuffer' in the httpOptions did the trick).

createReportBackend() {      const httpOption: Object = {       observe: 'response',       headers: new HttpHeaders({         'Content-Type': 'application/json'       }),       responseType: 'arraybuffer'     };      this.httpClient.post('http://localhost:8080/api/report', this.data, httpOption)       .pipe(map((res: HttpResponse) => {         return {           filename: 'Drinks.xlsx',           data: new Blob(             [res['body']],             { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}           ),         };       }))       .subscribe(res => {         if (window.navigator.msSaveOrOpenBlob) {           window.navigator.msSaveBlob(res.data, res.filename);         } else {           const link = window.URL.createObjectURL(res.data);           const a = document.createElement('a');           document.body.appendChild(a);           a.setAttribute('style', 'display: none');           a.href = link;           a.download = res.filename;           a.click();           window.URL.revokeObjectURL(link);           a.remove();         }       }, error => {         throw error;       }, () => {         console.log('Completed file download.');       });   }