Download FileResult not working with Angular

Question

I'm trying to down load the file(pdf,word,excel) which is saved as bytes[] in DB and below is my code. But getting error(Unexpected token error) when calling the method the method. Please guide me to fix it.

Controller Code:

[HttpPost]
        public async Task<FileResult> AttachmentById([FromBody]ReviewAttachmentModel attachmentRequest)
        {
            ReviewAttachmentModel model = new ReviewAttachmentModel();
            try
            {
                ReviewAttachmentDto reviewAttachmentDto = new ReviewAttachmentDto
                {
                    DocumentKey = attachmentRequest.DocumentKey,
                    ReviewKey = attachmentRequest.ReviewKey,
                    UserId = attachmentRequest.UserId,
                };
                ReviewAttachmentDto _attachmentDto = reviewAttachmentDto;

                string requestBody = JsonConvert.SerializeObject(_attachmentDto);

                //Call API
                string _responseObj = await WebAPIHelper.PostDataToAPI(appSettings.ReviewAttachmentUrl, requestBody, this.loggedinUser.CookieCollection, accessToken);
                model = JsonConvert.DeserializeObject<ReviewAttachmentModel>(_responseObj);

               //  model.Document - byte[]
                return File(model.Document, model.DocumentType, model.DocumentName);

            }
            catch (Exception ex)
            {
                return null;
            }
        }

Service.ts:

public downloadReviewAttachment(reviewAttachmentModel: any): Observable<any> {
    this._urlSurveillanceDetails = this.baseHref + "/ReviewProfile/AttachmentById";
    const headers: HttpHeaders = new HttpHeaders();
    headers.append('Content-Type', 'application/octet-stream');
    return this.http.post<any>(this._urlSurveillanceDetails, reviewAttachmentModel, { headers: headers });
  }

Component.ts:

onAttachmentDownload(documentKey: any, reviewKey: any) {
      let reviewAttachmentModel: any = {
        documentKey: documentKey,
        reviewKey: reviewKey
      };

    this._surveillanceService.downloadReviewAttachment(reviewAttachmentModel).subscribe(data => {
      if (data != undefined) {
      }
    })
  }

Error:

Check if this helps https://stackoverflow.com/questions/51682514/angular-how-to-download-a-file-from-httpclient — gkulshrestha, Sep 22 '20 at 17:10
@gkulshrestha - Thanks its helps ...its solved by adding proper response in header. — KARTHIKEYAN DEIVASENAKANTHAN, Sep 23 '20 at 15:24
Please check out my answer, I believe it simplifies the code — StPaulis, Oct 14 '20 at 16:49

StPaulis · Accepted Answer · 2020-10-14T16:56:39.313

Change this:

public downloadReviewAttachment(reviewAttachmentModel: any): Observable<any> {
    this._urlSurveillanceDetails = this.baseHref + "/ReviewProfile/AttachmentById";
    const headers: HttpHeaders = new HttpHeaders();
    headers.append('Content-Type', 'application/octet-stream');
    return this.http.post<any>(this._urlSurveillanceDetails, reviewAttachmentModel, { headers: headers });
  }

To this:

public downloadReviewAttachment(reviewAttachmentModel: any): Observable<blob> {
        this._urlSurveillanceDetails = this.baseHref + "/ReviewProfile/AttachmentById";
        return this.http.post(this._urlSurveillanceDetails, reviewAttachmentModel, { responseType: 'blob'});
      }

By removing the generic argument and add the responseType that you want. Angular knows what it has to be done.

Download FileResult not working with Angular

1 Answers1