title: Calling Spring boot api that downloads a pdf from Angular 6 is giving error can't parse response
body: <p>I have a spring boot API that creates a pdf report and download it, if I call the API directly in the browser, the pdf is created and downloaded directly, but when I call that GET API from Angular 6 I get the following error:</p>
  
  <p>The Spring boot (java) code:</p>
  
  <pre><code>@RequestMapping(value = "/app_report/en", method = RequestMethod.GET)
  @ResponseBody
  public void getEnRpt(HttpServletResponse response, @RequestParam("appNum") String appNum) throws JRException, IOException, SQLException {
  
      JasperReport jasperReport = JasperCompileManager.compileReport("./src/main/resources/jasperReports/App_created_en.jrxml");
  
      Connection connection = dataSource.getConnection();
  
      Map&lt;String, Object&gt; params = new HashMap&lt;&gt;();
      params.put("P_APP_NO", appNum);
      JasperPrint jasperPrint = JasperFillManager.fillReport(jasperReport, params, connection);
  
      response.setContentType("application/x-pdf");
      response.setHeader("Content-disposition", "inline; filename=App_report_en.pdf");
  
      final OutputStream outStream = response.getOutputStream();
      JasperExportManager.exportReportToPdfStream(jasperPrint, outStream);
  }
  </code></pre>
  
  <p>The Angular code that calls the API:( I tried multiple ways, two are shown here):</p>
  
  <pre><code>this.http.get(this.api_url + reportUrl, {
    responseType: 'blob'
  }, ).subscribe((response: File) =&gt; {
    console.log('report is downloaded');
  });
  
  this.http.get(this.api_url + reportUrl).subscribe(
    (response) =&gt; {
      console.log('report is downloaded');
    });
  </code></pre>
  
  <p>The console error that I get after the Angular calls the API:</p>
  
  <pre><code>error:
  SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse (&lt;anonymous&gt;) at XMLHttpRequest.onLoad 
  message: "Http failure during parsing for https://localhost:7001/reports/app_report/en?appNum=xxxxxxx"
  ​
  name: "HttpErrorResponse"
  ​
  ok: false
  ​
  status: 200
  ​
  statusText: "OK"
  ​
  url: "https://localhost:7001/reports/app_report/en?appNum=xxxxxx"
  </code></pre>
  
  <p>I only need to call the API like the call that happens in the browser so that the pdf is downloaded right away</p>
  
  <p>The response headers are as follows:</p>
  
  <pre><code>Content-disposition 
  inline; filename=App_report_en.pdf
  Content-Type    
  application/x-pdf
  </code></pre>
  
  <p>Why Angular is not downloading the file like what happens in the browser if I call that API? (especially since the request is successful)</p>