Angular 2 CSV文件下载

发布时间：2020-12-17 07:18:16 所属栏目：安全来源：网络整理

导读：我在 springboot应用程序中有我的后端,从那里我返回一个.csv文件 @RequestMapping(value = "/downloadCSV") public void downloadCSV(HttpServletResponse response) throws IOException { String csvFileName = "books.csv"; response.setContentType("text

我在 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","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","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.

现在我试图从我的角度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);
    }

我正在下载文件,但它像

Actually it should be Book.csv

请指导我缺少的东西.

有一种解决方法,但您需要创建一个< 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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!