title: Open PDF blob from Angular Component
body: <p>In my Angular application, I need to open a PDF when a button is clicked.</p>
  
  <p>I followed the directions given by <a href="https://stackoverflow.com/questions/37046133/pdf-blob-is-not-showing-content-angular-2">this</a> post in the first place, so I have these two methods right now:</p>
  
  <p><strong>In the calling component</strong></p>
  
  <pre><code>public PrepareDownload(){
     this._certificateService
              .GetPdf(args)
              .subscribe(
              result =&gt; {
                  this.BlobUri = URL.createObjectURL(result);
              }
  }
  
  public Download() {
      window.open(this.BlobUri);     
  }
  </code></pre>
  
  <p><strong>In the service</strong></p>
  
  <pre><code>public GetPdf() : any  {
    var headers = new Headers();
    headers.append("Content-Type", "application/json");
    var payload = {id:215};
    return this._http.post(this.requestUri, 
                           JSON.stringify(payload), 
                           { headers: headers, 
                             responseType: ResponseContentType.Blob })
                     .map((response: Response) =&gt; 
                     {
                        return new Blob([response.blob()], { type: 'application/pdf' });
                     });
  }
  </code></pre>
  
  <p>GetPdf's response contains an array like the following <code>[ 37,80,68,70,45,49,46,...]</code>. Unfortunately, when the download method is called, the result seems to be an invalid pdf. When downloading the file via firefox and renaming it to a txt-file, I can see that the content is not binary but the complete byte array as a string.</p>
  
  <p><a href="https://i.stack.imgur.com/eH5dT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eH5dT.png" alt="enter image description here"></a></p>