角 2 CSV 文件下载

Question

我在 springboot 应用程序中有我的后端，并从那里返回一个 .csv 文件

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

当我点击浏览器中的 URL 时，csv 文件正在下载。

现在我正在尝试从我的 angular 2 应用程序中访问此 URL，代码如下：

组件：

    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);
    }

服务：

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

我正在下载文件，但它类似于

其实应该是Book.csv

请指导我缺少什么。

Answer 1

有一个解决方法，但您需要在页面上创建一个<a> 元素。调用revokeObjectURL清空内存：

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);
}