title: Download file from Web API Core - Angular 7
body: <p>I'm trying to download a file from the server but the file is not displaying it's original content instead it's displaying [object Object]. </p>
  
  <p>WEB API CORE</p>
  
  <pre><code>[Authorize(AuthenticationSchemes = "Bearer")]
  [HttpGet]
  public HttpResponseMessage DownloadContractFile(string fileName)
  {
      string contentRootPath = _hostingEnvironment.ContentRootPath;
      var folderName = Path.Combine(contentRootPath, FileHandler.ContractFilePath, Convert.ToInt32(User.Identity.Name).ToString());
  
      var path = Path.Combine(folderName, fileName);
  
      var memory = new MemoryStream();
  
      HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
      using (var stream = new FileStream(path, FileMode.Open))
      {
          result.Content = new StreamContent(stream);
          result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
          result.Content.Headers.ContentDisposition.FileName = Path.GetFileName(path);
          result.Content.Headers.ContentType = new MediaTypeHeaderValue(FileHandler.GetContentType(path)); // Text file
          result.Content.Headers.ContentLength = stream.Length;
  
          return result;
      }
  }
  </code></pre>
  
  <p>Angular Code: Service method</p>
  
  <pre><code>  downloadContractFile(fileName: string) {
  
      const obj: any = { fileName: fileName };
  
      const httpParams: HttpParamsOptions = { fromObject: obj } as HttpParamsOptions;
  
      const httpOptions = {
        params: new HttpParams(httpParams),
        headers: new HttpHeaders({
          'Content-Type': 'application/octet-stream',
          'Authorization': 'Bearer ' + this.jwt.getToken
        })
      };   
  
  
      return this.http.get&lt;Array&lt;any&gt;&gt;(`${this.settings.getApiSettings('uri')}/api/contract/DownloadContractFile`, httpOptions).map( /// &lt;&lt;&lt;=== use `map` here
        (response) =&gt; {
  
          if (response["status"] == 401) {
            this.jwt.redirectToLogin();
          }
          else if (response["status"] &lt; 200 || response["status"] &gt;= 300) {
            throw new Error('This request has failed ' + response["status"]);
          }
          let data = response;
          return data;
        }
      );
  
    }
  </code></pre>
  
  <p>Component.ts</p>
  
  <pre><code>  downloadFile(fileName) {
  
      this.js.checkTokenValid().subscribe(res =&gt; {
  
        if (res == null)
          this.js.redirectToLogin();
        else {
  
          this.conc.downloadContractFile(fileName).subscribe(respData =&gt; {
  
            console.log(respData);
  
            this.type = respData.content["headers"][1]["value"][0];
  
            this.downFile(respData.content, this.type, fileName);
  
          }, error =&gt; {
  
          });
  
        }
      });
  
    }
  
    downFile(data: any, type: string, fileName: string) {
  
      var blob = new Blob([data], { type: type });
      var url = window.URL.createObjectURL(blob);
  
      saveAs(blob, fileName);
  
      //var fileURL = URL.createObjectURL(res);
      //window.open(fileURL); // if you want to open it in new tab
  
    }
  </code></pre>
  
  <p>Component.html</p>
  
  <pre><code>&lt;a href="javascript:void(0)" (click)="downloadFile(item.fileName);"&gt;download file&lt;/a&gt;
  </code></pre>
  
  <p>Response Received</p>
  
  <p><a href="https://i.stack.imgur.com/580Hj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/580Hj.jpg" alt="enter image description here"></a></p>
  
  <p>Received file content</p>
  
  <p><a href="https://i.stack.imgur.com/SiPKt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SiPKt.jpg" alt="enter image description here"></a></p>