Download file using Angular 6 from an ASP.NET Web API method

Question

I want to download the PDF and doc file on URL click event using the Angular6 and Web API.

Component.ts

download(ID: number) {
    this._Services.download_test(ID).subscribe(res => {
          const data = new Blob([res], { type: 'text/plain;charset=utf-8' });
         saveAs(data, 'text.docx');
         console.log(data);
       });
   }

Service.ts

 public download_test(Id: number): Observable<Blob> {
    const headers = new HttpHeaders().set('content-type', 'multipart/form-data');

     return this.http.get(_baseUrl + 'GetFileDetail' + '?id=' + Id,
      { headers, responseType: 'blob' }).pipe(
      map((res: Response) => {
        console.log(res.headers);
        console.log(res.blob());
         return new Blob([res.blob()], { type: 'application/octet-stream' });
       }
      ));
  }

API

[HttpGet]
        public HttpResponseMessage GetFileDetail(int id)
        {
            //Create HTTP Response.
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            string fileName;
            //Fetch the File data from Database.
            Dictionary<string, object> rec;
            DbConnection conn = CommonFunction.GetDBConnection();
            conn.Open();
            string qrystr = "SELECT FileName,FileType,FileContent "
                + " FROM tFileData "
                + " where ID = " + id;
            rec = CommonFunction.GetSingleRecord(qrystr, conn);
            if (rec.Count != 0)
            {
                Byte[] data = (Byte[])rec["FileContent"];
                string Type = rec["FileType"].ToString();
                fileName = rec["FileName"].ToString();
                MemoryStream ms = new MemoryStream(data);

                //Set the Response Content.
                response.Content = new StreamContent(ms);
                //Set the Content Disposition Header Value and FileName.
                response.Content.Headers.ContentLength = data.LongLength;
                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                response.Content.Headers.ContentDisposition.FileName = fileName;
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            }
            return response;
        }

This code doesn't work for me. It throws the error:

ERROR TypeError: res.blob is not a function

What does console.log(res.headers); display? I'm assuming it's undefined... — Kirk Larkin
– Kirk Larkin, Commented Sep 6, 2018 at 20:00
there's no need to do map inside download method , you already told angular, that the responseType is 'blob' — JSingh
– JSingh, Commented Sep 6, 2018 at 20:05

user10327238 · Accepted Answer · 2018-09-07 18:23:44Z

1

I modified my service.ts file as below:

public download_test(Id: number): Observable<Blob> {
    const headers = new HttpHeaders().set('content-type', 'multipart/form-data');

     return this.http.get(_baseUrl + 'GetFileDetail' + '?id=' + Id,
      { headers, responseType: 'blob' });
  }

and components.ts file:

 download(ID: string) {
    this._jobServices.download_test(ID).subscribe(res => {
          const data = new Blob([res], { type: 'application/pdf' });
         saveAs(data);
         console.log(data);
       });
   }

It's working. Thank you!

edited Sep 7, 2018 at 18:23

answered Sep 7, 2018 at 13:42

user10327238

211 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Download file using Angular 6 from an ASP.NET Web API method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related