title: Angular 2 - download csv file
body: <p>I'm trying to download a csv file from a Microsoft Web API 2 controller. Here's what I have so far:-</p>
  <p>Web API:-</p>
  <pre><code>    [Route(&quot;extractContent/{extractId}&quot;)]
      public async Task&lt;IHttpActionResult&gt; GetExtractContent(int extractId)
      {
          _logger.Info($&quot;Getting extract file content for extract with id: {extractId}...&quot;);
  
          try
          {
              IEnumerable&lt;ExtractDto&gt; extracts = await _extractService.GetExtractsAsync(new ExtractSearchRequest { ExtractId = extractId });
  
              ExtractDto extract = extracts?.FirstOrDefault();
  
              if (extract != null)
              {
                  string path = extract.FilePath;
  
                  HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
  
                  var stream = new FileStream(path, FileMode.Open, FileAccess.Read);
  
                  using (result.Content = new StreamContent(stream))
                  {
                      result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue(&quot;attachment&quot;)
                      {
                          FileName = Path.GetFileName(path)
                      };
                      result.Content.Headers.ContentType = new MediaTypeHeaderValue(&quot;application/octet-stream&quot;);
  
                      return Ok(result);
                  }
              }
              throw new InvalidOperationException($&quot;Could not find extract with id: {extractId}&quot;);
          }
          catch (Exception e)
          {
              _logger.ErrorException($&quot;An error occured trying to get extract content for extract with id: {extractId}&quot;, e);
  
              return InternalServerError(e);
          }
      }
  </code></pre>
  <p>Angular 2 Download Service:-</p>
  <pre><code>@Injectable()
  export class DownloadService {
  private baseAddress: string;
  private headers: Headers;
  private options: RequestOptions;
  
  constructor(private http: Http, private config: Config, private errorService: ErrorService) {
      this.baseAddress = config.cache.get('portfolioUploadApiUrl');
      this.headers = new Headers({ 'Content-Type': 'application/json' });
      this.options = new RequestOptions({ headers: this.headers, withCredentials: true, responseType:  ResponseContentType.Blob});
  }
  
  getExtractContent(extractId: number): Observable&lt;Blob&gt; {
     
      return this.http.get(this.baseAddress + 'extractContent/' + extractId, this.options)
          .map((response: Response) =&gt; 
              {
                  return new Blob([response.blob()], {type: 'application/csv'});
              }
          )
          .catch(this.errorService.handleError);
  }
  </code></pre>
  <p>}</p>
  <p>Angular 2 client code:-</p>
  <pre><code>onDownload(): void {
      if (this.extract &amp;&amp; this.extract.FilePath) {
          this.downloadService.getExtractContent(this.extractId).subscribe(blob =&gt; {
              var date = new Date();
              var day = date.getDay();
              var month = date.getMonth();
              var year = date.getFullYear();
              var seconds = date.getSeconds();
              var minutes = date.getMinutes();
              var hours = date.getHours();
              var formattedDate = day + '' + (month + 1) + '' + year + '' + hours + '' + minutes + '' + seconds;
              var fileName = &quot;Extract&quot; + this.extractId + &quot;-&quot; + formattedDate + &quot;.csv&quot;;
              FileSaver.saveAs(blob, fileName)
          })
      }
  }
  </code></pre>
  <p>However, when I run the download, I get a csv file downloaded which has the following in it:-</p>
  <pre><code>{&quot;Version&quot;:{&quot;_Major&quot;:1  _Minor:1    _Build:-1   _Revision:-1}   Content:{&quot;Headers&quot;:[{&quot;Key&quot;:&quot;Content-Disposition&quot;    Value:[&quot;attachment; filename=\&quot;RPModel_Portfolio_ISY - 20170925.csv\&quot;&quot;]}    {&quot;Key&quot;:&quot;Content-Type&quot;   Value:[&quot;application/octet-stream&quot;]}]}   StatusCode:200  ReasonPhrase:&quot;OK&quot;   Headers:[]  RequestMessage:null IsSuccessStatusCode:true}
  </code></pre>
  <p>Can anyone help?</p>
  <p>Thanks</p>