title: Download a file in Angular 2+ application
body: <p>I am working on an <strong>Angular 9</strong> web application, where in one of the pages, the client <strong>expects a PDF to be downloaded after submitting a form</strong>.</p>
  <p>I can generate the PDF file successfully at the backend (server-side) and return it using a stream. The output of the Web API I developed to return can be seen from following link:</p>
  <p><a href="https://pastebin.com/xJScx7A4" rel="nofollow noreferrer">https://pastebin.com/xJScx7A4</a></p>
  <p>At my Angular app, I have tried several ways to open the PDF in the browser or downloading it as a file. In every case, I get something similar to as shown by the screenshot below</p>
  <p><a href="https://i.stack.imgur.com/YKGMF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YKGMF.png" alt="enter image description here" /></a></p>
  <p>First way I tried:</p>
  <pre><code>loadReport(){
  
  this.spinner.show();
  
  //////// /////////////// /////////////////////
  
  this.api.loadReport(this.filterVM)
  .subscribe(res =&gt; {
    console.log(res);
    this.spinner.hide();
  
    ////// //////////////////////////
    const blob = new Blob([res], { type: 'application/pdf' });
    const url= window.URL.createObjectURL(blob);
    window.open(url);
    ////////// /////////////////////
  
  }, err =&gt; {
    console.log(err);
    this.spinner.hide();
  });
  ///// ///////////// //////////////////////////
  
  }
  </code></pre>
  <p>Second way I tried:</p>
  <pre><code>  loadReport(){
  
      this.spinner.show();
  
      //////// /////////////// /////////////////////    
      this.api.loadReport(this.filterVM)
      .subscribe(res =&gt; {
        console.log(res);
        this.spinner.hide();
  
        ////// //////////////////////////
        this.saveByteArray(&quot;Sample Report.pdf&quot;, res);
        ////////// /////////////////////
  
      }, err =&gt; {
        console.log(err);
        this.spinner.hide();
      });
      ///// ///////////// //////////////////////////
  
    }
  
   saveByteArray(reportName, byte) {
    var blob = new Blob([byte], {type: &quot;application/pdf&quot;});
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    var fileName = reportName;
    link.download = fileName;
    link.click();
  };
  </code></pre>
  <p>Output of second way is shown in the below screenshot:</p>
  <p><a href="https://i.stack.imgur.com/edluj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/edluj.png" alt="enter image description here" /></a></p>
  <p>When I try to download the file, I have seen that it is significantly less in size than the size of the HTTP response (9 bytes vs ~16 KB).
  My Web API HTTP response is sending the following headers:</p>
  <pre><code>Content-Type: application/pdf
  Content-Length: 16187
  Content-Disposition: attachment; filename=Report.pdf; filename*=UTF-8''Report.pdf
  </code></pre>
  <p>I have experimented with code from the following blogs/sites, but no success yet.</p>
  <p><a href="https://stackoverflow.com/questions/35038884/download-file-from-bytes-in-javascript">Download File from Bytes in JavaScript</a></p>
  <p><a href="https://stackoverflow.com/questions/43235129/typescript-blob-filename-without-link">Typescript blob filename without link</a></p>
  <p><a href="https://blog.liplex.de/download-file-through-typescript/" rel="nofollow noreferrer">https://blog.liplex.de/download-file-through-typescript/</a></p>
  <p><a href="https://dev.to/nombrekeff/download-file-from-blob-21ho" rel="nofollow noreferrer">https://dev.to/nombrekeff/download-file-from-blob-21ho</a></p>
  <p><a href="https://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2-or-greater">How do I download a file with Angular2 or greater</a></p>