Error downloading .xlsx file using http.get in angular with asp.net web api

Question

Im trying to download a .xlsx file using Angular 7 and web api in c# but Im getting this error:

My service.ts

public exportExcelFile(matchedRows: string, reportInfoId: number): Observable<any> {
        const httpOptions = {
            headers: new HttpHeaders({ 'responseType':  'ResponseContentType.Blob',
            'Content-Type':  'application/vnd.ms-excel'})};
        const url = `${environment.apiUrl}report/${reportInfoId}/exportExcelFile?matchedRows=${matchedRows}`;

        return this.http.get(url, httpOptions);

    }

Method that is "consuming" my service:

exportExcelFile(matchedRows:string){
        this.service.exportExcelFile(matchedRows, this.reportInfo.ide).subscribe((response)=>{
            console.log(response)
        })  
        this.exportingExcelFile=false;
        this.ready=true;
    }

Method that is retrieving my response from API

[HttpGet]
public IHttpActionResult ExportExcelFile(int reportId, bool matchedRows)
{

    var user = Request.GetAuthenticatedUser();
    var query = new GetExcelFileQuery(reportId, user.UserName, matchedRows);
    var result = _dispatcher.Dispatch<GetExcelFileQuery, GetExcelFileModel>(query);

    using (var memoryStream = new MemoryStream()) //creating memoryStream
    {
        result.Workbook.Write(memoryStream);

        var response = new HttpResponseMessage(HttpStatusCode.OK);
        response.Content = new ByteArrayContent(memoryStream.ToArray());
        response.Content.Headers.ContentType = new MediaTypeHeaderValue
               ("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.Content.Headers.ContentDisposition =
               new ContentDispositionHeaderValue("attachment")
               {
                   FileName = result.FileName
               };

        return result == null ? NotFound() : (IHttpActionResult)new FileResult(response);
    }
}

If I access directly using the URL on my browser, the excel file is correctly exported

nll_ptr · Accepted Answer · 2019-07-12 19:11:34Z

1

Your backend is fine. The client is trying to parse the response as it was a json file. 'responseType' should just be 'blob' and it should be placed outside of the HttpHeaders object. You can omit the entire httpHeaders object in your situation

const url = `${environment.apiUrl}report/${reportInfoId}/exportExcelFile?matchedRows=${matchedRows}`;

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

Here's some additional info on the responseType object: https://angular.io/api/common/http/HttpRequest#responseType

edited Jul 12, 2019 at 19:11

answered Jul 12, 2019 at 18:48

nll_ptr

9078 silver badges14 bronze badges

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

Comments

Pugnatore · Accepted Answer · 2019-07-15 12:47:16Z

Service.ts

   public exportExcelFile(matchedRows: string, reportInfoId: number): Observable<any> {

        const url = `${environment.apiUrl}report/${reportInfoId}/exportExcelFile?matchedRows=${matchedRows}`;

        return this.http.get(url,{  observe: 'response', responseType: 'blob'} );

    }

Method that is calling my service

exportExcelFile(matchedRows:string){
        this.service.exportExcelFile(matchedRows, this.reportInfo.ide).subscribe((response)=>{

            const blob = new Blob([response.body],
                { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

            const file = new File([blob], 'reports.txt',
                { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });


            saveAs(file);
        })

with

import { saveAs } from 'file-saver';

The excel file is correctly generated

Collectives™ on Stack Overflow

Error downloading .xlsx file using http.get in angular with asp.net web api

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related