Angular 2 CSV File Download

Question

I have my backend in springboot application and from there i am return a .csv file

 @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 & 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 & Philip Wadler", "O'Reilly Media", "0596527756",
                    "10/24/2006", 27);

            List<Book> 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();
        }

When i am hitting the URL in browser csv file is getting downloaded.

Now i am trying to hit this URL from my angular 2 app , code is like this:

Component:

    exportCSV() {
            console.log('export csv called'); 
            this.csvservice.getCSVReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                error => console.log('Error downloading the file.'),
                () => 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);
    }

Service:

  getCSVReport() {       
        return this.http.get(this.config.importCSVApiUrl);
    }

I am getting the file downloaded but its like

Actually it should be Book.csv

Please guide me what i am missing.

Poul Kruijt · Accepted Answer · 2017-04-05 07:36:51Z

20

There is a workaround, but you need to create an <a> element on the page. Call revokeObjectURL to clear the memory:

downloadFile(data: any) {
    let parsedResponse = data.text();
    let blob = new Blob([parsedResponse], { type: 'text/csv' });
    let url = window.URL.createObjectURL(blob);

    if(navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, 'Book.csv');
    } else {
        let a = document.createElement('a');
        a.href = url;
        a.download = 'Book.csv';
        document.body.appendChild(a);
        a.click();        
        document.body.removeChild(a);
    }
    window.URL.revokeObjectURL(url);
}

edited Apr 5, 2017 at 7:36

answered Apr 4, 2017 at 8:44

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rohitesh Over a year ago

many tanks its working but, my csv name is comming from backend only so, in that case how i can set this

Poul Kruijt Over a year ago

@Rohitesh I've updated my answer for IE and Firefox support. To have a dynamic filename, you should adjust your getCSVReport method to return an object container the response and the filename, which you can then use inside the downloadFile method

Nancy Over a year ago

@PierreDuc Can u help me with this stackoverflow.com/questions/51281848/…

Collectives™ on Stack Overflow

Angular 2 CSV File Download

Component:

Service:

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Component:

Service:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related