Browser lädt die erstellte CSV-Datei nicht

Question

Ich arbeite an einem Webprojekt. Ich benutze Spring Boot und Angular 2. Ich möchte CSV-Datei erstellen und diese Datei auf dem Client-PC vom Server herunterladen. Ich verwende Apache Poi, um die CSV-Datei zu erstellen. Wenn ich auf die Schaltfläche "Export CSV" klicke, kann ich vom Frontend zum Backend via Service wechseln und die CSV-Datei auf dem Server erfolgreich erstellen. Hier ist Service-Code:

exportCSVFileTest(parameter: string): Observable<any> { 
    return this.httpService.post(super.getAddrApi() + parameter , null) 
     .catch(err => { 
      if (!err.status) { 
       err = { 
        status: Observable.throw(401) 
       }; 
      } 
      return Observable.throw(err); 
     }); 
} 

Nachdem ich diesen Dienst nutzen, erstelle ich die CSV-Datei auf dem Server, und ich versuchen, diese Datei auf dem Client-PC zum Download vom Server:

response.setContentType("application/octet-stream"); 
     response.setHeader("Content-Disposition", 
       "attachment;filename=" + file.getName()); 
     FileInputStream is = new FileInputStream(file); 
     ServletOutputStream out = response.getOutputStream(); 
     byte[] outputByte = new byte[4096]; 
     while(is.read(outputByte, 0, 4096) != -1) 
     { 
      out.write(outputByte, 0, 4096); 
     } 

     is.close(); 
     out.flush(); 
     out.close(); 

Danach habe ich don‘ t keinen Fehler bekommen. Alles scheint gut, aber das Fenster, das beim Hochladen der Datei angezeigt werden sollte, wird nicht angezeigt. Ich habe verschiedene Methoden ausprobiert, zum Beispiel habe ich den Inhaltstyp application/csv oder text/csv festgelegt. Und ich habe versucht "OutputStream", "response.getWriter().write()" vs. Was mache ich falsch?

Answer 1

Um eine Datei, die Sie dem Browser mitteilen müssen herunterladen es ein Download ist, ich 2 Möglichkeiten kennen, dies zu tun:

1 - Laden Sie die Datei über einen Link in der HTML-

<a [routerLink]="['url/to/download/the/file']">Download CSV</a> 

2 - Holen Sie die Datei Ihren Dienst verwenden und mit saveAs Bibliothek

import {saveAs} from 'file-saver'; 

this.service.exportCSVFileTest('parameter').subscribe(response => { 
    const filename = 'name of the file.csv'; 
    saveAs(response.blob(), filename); 
}) 

Download

Hoffe diese Hilfe.