title: Angular2 download excel file from Web API, file is corrupt
body: <p>I am trying to download a file that I created with ClosedXML.  I have verified that the file is not corrupt but, for some reason, it works just with Angular1, not Angular2.  The web api code to return the file is:</p>
  
  <pre><code>HttpResponseMessage response = new HttpResponseMessage();
  response.StatusCode = HttpStatusCode.OK;
  response.Content = new ByteArrayContent(ms.GetBuffer());
  response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
  response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
  return response;
  </code></pre>
  
  <p>In Angular2, in my web service:</p>
  
  <pre><code>let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('responseType', 'arrayBuffer');
  this.observableDataGet = this._http.post(`${AppSettings.REPORTS_API_URL}/Report/MonthlySpreadsheet`, {headers: this.getHeaders()})
      .map(response =&gt; {
          if (response.status == 400) {
              return "FAILURE";
          } else if (response.status == 200) {
              var contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
              var blob = new Blob([response.arrayBuffer()], { type: contentType });
              return blob;
          }
      })
  </code></pre>
  
  <p>and in my component:</p>
  
  <pre><code>.subscribe(blob =&gt; {
      var downloadUrl= URL.createObjectURL(blob);
      window.open(downloadUrl);
  },
  </code></pre>
  
  <p>A file IS downloaded, but it is corrupt when I try to access it and is TWICE the size of the file when downloaded with Angular1.</p>
  
  <p>If I call the SAME API with Angular1, the file is downloaded fine.</p>
  
  <p>My service code:</p>
  
  <pre><code>function generateMonthlySpreadsheet(header) {
      var request = $http({
          method: "post",
          responseType: 'arraybuffer',
          url: TEST_API_URL + 'Report/MonthlySpreadsheet',
          timeout: 30000,
          headers: header
      });
      return ( request.then(handleSuccess, handleError) );
  }
  </code></pre>
  
  <p>where handleSuccess returns response.data (which I can't get at for angular2)</p>
  
  <p>and the code to invoke the service:</p>
  
  <pre><code>alertAppService.generateMonthlySpreadsheet(header).then(function (data){
      var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
      var objectUrl = URL.createObjectURL(blob);
      window.open(objectUrl);
  </code></pre>
  
  <p>Interestingly enough, in Angular2, if I simply change my webservice to a GET (I wanted POST however, but just to try it out) then got rid of the service code and simply made this call, the file is fine:</p>
  
  <pre><code>window.open(`${AppSettings.REPORTS_API_URL}/Report/MonthlySpreadsheet`, "_blank");
  </code></pre>
  
  <p>So, really, what is the difference here?  Why does the same or very similar code work for Angular1 but not Angular2??</p>
  
  <p>-- Karen</p>