title: Angular 2 CSV File Download
body: <p>I have my backend in springboot application and from there i am return a .csv file </p>
  
  <pre><code> @RequestMapping(value = "/downloadCSV")
          public void downloadCSV(HttpServletResponse response) throws IOException {
           String csvFileName = "books.csv";
  
              response.setContentType("text/csv");
  
              // creates mock data
              String headerKey = "Content-Disposition";
              String headerValue = String.format("attachment; filename=\"%s\"",
                      csvFileName);
              response.setHeader(headerKey, headerValue);
  
              Book book1 = new Book("Effective Java", "Java Best Practices",
                      "Joshua Bloch", "Addision-Wesley", "0321356683", "05/08/2008",
                      38);
  
              Book book2 = new Book("Head First Java", "Java for Beginners",
                      "Kathy Sierra &amp; Bert Bates", "O'Reilly Media", "0321356683",
                      "02/09/2005", 30);
  
              Book book3 = new Book("Thinking in Java", "Java Core In-depth",
                      "Bruce Eckel", "Prentice Hall", "0131872486", "02/26/2006", 45);
  
              Book book4 = new Book("Java Generics and Collections",
                      "Comprehensive guide to generics and collections",
                      "Naftalin &amp; Philip Wadler", "O'Reilly Media", "0596527756",
                      "10/24/2006", 27);
  
              List&lt;Book&gt; listBooks = Arrays.asList(book1, book2, book3, book4);
  
              // uses the Super CSV API to generate CSV data from the model data
              ICsvBeanWriter csvWriter = new CsvBeanWriter(response.getWriter(),
                      CsvPreference.STANDARD_PREFERENCE);
  
              String[] header = { "Title", "Description", "Author", "Publisher",
                      "isbn", "PublishedDate", "Price" };
  
  
              csvWriter.writeHeader(header);
  
              for (Book aBook : listBooks) {
                  csvWriter.write(aBook, header);
              }
  
              csvWriter.close();
          }
  </code></pre>
  
  <blockquote>
    <p>When i am hitting the URL in browser csv file is getting downloaded.</p>
  </blockquote>
  
  <p>Now i am trying to hit this URL from my angular 2 app , code is like this:</p>
  
  <h2>Component:</h2>
  
  <pre><code>    exportCSV() {
              console.log('export csv called'); 
              this.csvservice.getCSVReport().subscribe(data =&gt; this.downloadFile(data)),//console.log(data),
                  error =&gt; console.log('Error downloading the file.'),
                  () =&gt; console.info('OK');
  
          }
  
    downloadFile(data: any) {
          let parsedResponse = data.text();
          let blob = new Blob([parsedResponse], { type: 'text/csv' });
          let url = window.URL.createObjectURL(blob);
          window.open(url);
      }
  </code></pre>
  
  <h2>Service:</h2>
  
  <pre><code>  getCSVReport() {       
          return this.http.get(this.config.importCSVApiUrl);
      }
  </code></pre>
  
  <p>I am getting the file downloaded but its like <a href="https://i.stack.imgur.com/FCMVB.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/FCMVB.jpg" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>Actually it should be Book.csv</p>
  </blockquote>
  
  <p>Please guide me what i am missing.</p>