File Download using Asp.net Web Api and Angular 8

Question

Hi I recently started working on angular and I have a requirement to create and download excel file using asp.net web api and angular 8

I created excel file using Asp.net Web API and returning file as

return File(excelPackage.GetAsByteArray(), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "test.xlsx");

I have to read this excel file using angular and download

GetExportExcel(editQuoteFilters: EditQuoteModel):Observable<any>{ 
      let postHeaders = new HttpHeaders();
      postHeaders.append('Content-Type', 'application/json');
      postHeaders.append('responseType', 'blob');
      return this.http.post<any>(this.ExcelExportLevel0ApiUrl, editQuoteFilters,{ headers: postHeaders, 
           responseType : 'arraybuffer' as 'json'})                                      
          .pipe(map((res) =>{
                  var blob = new Blob([res.blob()], {type: "application/vnd.ms-excel"})
                  return blob
                })
          );
    }

Adrita Sharma · Accepted Answer · 2020-06-11 12:19:16Z

1

You can use file-saver

import { saveAs } from 'file-saver';

this.http.post(this.ExcelExportLevel0ApiUrl, editQuoteFilters, { responseType: 'blob' }).subscribe((resp: any) => {
   let fileName = "test";
   FileSaver.saveAs(resp, `${fileName}.xlsx`);
});

Stackbiltz code

edited Jun 11, 2020 at 12:19

answered Jun 11, 2020 at 11:05

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

2 Comments

ashish garg Over a year ago

Following is working for me this.http.post<any>(this.ExcelExportLevel0ApiUrl, editQuoteFilters,{responseType : 'blob' as 'json'}) .pipe(map((res: any) => { return new Blob([res],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) })).subscribe(data => saveAs(data,'InventoryUploadStatus'));

Adrita Sharma Over a year ago

Great :) Please mark the answer as correct if this was useful

Collectives™ on Stack Overflow

File Download using Asp.net Web Api and Angular 8

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related