title: Open pdf from bytes array in angular 5
body: <p>I was following the below links for displaying pdf page in new tab in my angular 5 application. But unable to achieve the result.</p>
  
  <p>I am consuming the bytes array from spring controller api.</p>
  
  <p><a href="https://stackoverflow.com/questions/37046133/pdf-blob-is-not-showing-content-angular-2">PDF Blob is not showing content, Angular 2</a></p>
  
  <p><a href="https://stackoverflow.com/questions/21729451/pdf-blob-pop-up-window-not-showing-content">PDF Blob - Pop up window not showing content</a></p>
  
  <p><a href="https://stackoverflow.com/questions/40300252/angular2-displaying-pdf">Angular2 Displaying PDF</a></p>
  
  <p>I tried the below options but none of them is working.</p>
  
  <h2><strong>Trial 1</strong></h2>
  
  <p>Consumed the response as json</p>
  
  <p>component.ts</p>
  
  <pre><code>clickEvent(){
  this.service.getPDF().subscribe((response)=&gt;{
  
    let file = new Blob([response.byteString], { type: 'application/pdf' });            
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
  })
  </code></pre>
  
  <p>}</p>
  
  <p>service.ts</p>
  
  <pre><code>getPDF(){
  const url = `${this.serviceUrl}/pdf`;
  
  const httpOptions = {
    headers: new HttpHeaders(
      {
        'Accept': 'application/json',
        'responseType':'blob'
      }
    )
  };
  
  return this.http.get&lt;any&gt;(url, httpOptions);
  
  }
  </code></pre>
  
  <h2><strong>Trial 2</strong></h2>
  
  <p>Consumed the response as json</p>
  
  <p>component.ts</p>
  
  <pre><code>clickEvent(){
  this.service.getPDF().subscribe((response)=&gt;{
  
    let file = new Blob([response.byteArray], { type: 'application/pdf' });            
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
  })
  </code></pre>
  
  <p>}</p>
  
  <p>service.ts</p>
  
  <pre><code>getPDF(){
  const url = `${this.serviceUrl}/pdf`;
  
  const httpOptions = {
    headers: new HttpHeaders(
      {
        'Accept': 'application/json',
        'responseType':'arraybuffer'
      }
    )
  };
  
  return this.http.get&lt;any&gt;(url, httpOptions);
  
  }
  </code></pre>
  
  <h2><strong>Trial 3</strong></h2>
  
  <p>Consumed the response as bytes</p>
  
  <p>component.ts</p>
  
  <pre><code>clickEvent(){
  this.service.getPDF().subscribe((response)=&gt;{
  
    let file = new Blob([response], { type: 'application/pdf' });            
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
  })
  </code></pre>
  
  <p>}</p>
  
  <p>service.ts</p>
  
  <pre><code>getPDF(){
  const url = `${this.serviceUrl}/pdf`;
  
  const httpOptions = {
    headers: new HttpHeaders(
      {
        'responseType':'blob'                 //both combination
        //'responseType'  : 'arraybuffer'
      }
    )
  };
  
  return this.http.get&lt;any&gt;(url, httpOptions);
  
  }
  </code></pre>
  
  <p>By all the combination I am only getting two results.
  Empty pdf document or Failed to load PDF document. </p>
  
  <p><a href="https://i.stack.imgur.com/QFxWW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QFxWW.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/kjKln.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kjKln.png" alt="enter image description here"></a></p>
  
  <p>For understanding posting java spring controller code.</p>
  
  <p>controller.java</p>
  
  <pre><code>@GetMapping(value = "/pdf")
  public ResTest generatePDF(HttpServletResponse response) throws IOException {
      ResTest test = new ResTest();
      ByteArrayOutputStream baos = docTypeService.createPdf();
      test.setByteArray(baos.toByteArray());
      test.setByteString(new String(baos.toByteArray()));
      return test;
  }
  </code></pre>