Angular Spring Boot File Download

问题

Good day to you reading this!

I did the upload functionality on this software setup but I cannot finish the download part... Digged as much as I could around here and this is where I got so far.

My code looks like this:

Server

 @GetMapping(value = "/projects/file/download/{filename}/{projectId}")
 public ResponseEntity<byte[]> getResource(@PathVariable String filename, @PathVariable Long 
    projectId,HttpServletResponse response) throws ResourceNotFoundException, IOException {

    String fileLocation=//a location that I set, removed logic to make this shorter

    File downloadFile= new File(fileLocation);

    byte[] isr = Files.readAllBytes(downloadFile.toPath());
    String fileName = filename;
    HttpHeaders respHeaders = new HttpHeaders();
    respHeaders.setContentLength(isr.length);
    respHeaders.setContentType(new MediaType("text", "json"));
    respHeaders.setCacheControl("must-revalidate, post-check=0, pre-check=0");
    respHeaders.set(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);
    return new ResponseEntity<byte[]>(isr, respHeaders, HttpStatus.OK);

 }

Angular Service

downloadFile(filename: string, projectId: number): Observable<any> {
 return this.http.get(`${this.baseUrl}/file/download/` + filename + '/' + projectId, { responseType: 'blob' });
}

Angular Component

downloadFile(fl: FileModel) {
  //calling service
  this.projectSerivce.downloadFile(fl.fileName, this.id).subscribe(response => {
    window.open(response.url, '_blank');
  });
}

It reaches server and comes back and then a new blank browser tab is open and nothing else happens.. No error whatsoever.

回答1:

Try this,

Spring Controller

@GetMapping(value = "/projects/file/download/{filename}/{projectId}")
public void getResource(@PathVariable String filename, @PathVariable Long 
    projectId,HttpServletResponse response) throws ResourceNotFoundException, IOException {

    String fileLocation=//a location that I set, removed logic to make this shorter

    File downloadFile= new File(fileLocation);

    byte[] isr = Files.readAllBytes(downloadFile.toPath());
    ByteArrayOutputStream out = new ByteArrayOutputStream(isr.length);
    out.write(isr, 0, isr.length);

    response.setContentType("application/pdf");
    // Use 'inline' for preview and 'attachement' for download in browser.
    response.addHeader("Content-Disposition", "inline; filename=" + fileName);

    OutputStream os;
    try {
        os = httpServletResponse.getOutputStream();
        out.writeTo(os);
        os.flush();
        os.close();
    } catch (IOException e) {
        e.printStackTrace();
    }

    /*HttpHeaders respHeaders = new HttpHeaders();
    respHeaders.setContentLength(isr.length);
    respHeaders.setContentType(new MediaType("text", "json"));
    respHeaders.setCacheControl("must-revalidate, post-check=0, pre-check=0");
    respHeaders.set(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);
    return new ResponseEntity<byte[]>(isr, respHeaders, HttpStatus.OK);*/
}

Angular Service

import { map } from "rxjs/operators";

downloadFile(filename: string, projectId: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/file/download/` + filename + '/' + projectId, { responseType: 'blob' }).pipe(map((response)=>{
        return {
            filename: 'yourFileName.pdf',
            data: response.blob()
        };
    }));
}

Angular Component

downloadFile(fl: FileModel) {

    //calling service
    this.projectSerivce.downloadFile(fl.fileName, this.id).subscribe(response => {

        console.log(response);
        var binaryData = [];
        binaryData.push(response.data);
        var url = window.URL.createObjectURL(new Blob(binaryData, {type: "application/pdf"}));
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display: none');
        a.setAttribute('target', 'blank');
        a.href = url;
        a.download = response.filename;
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();

    }, error => {

        console.log(error);
    });
}

来源：https://stackoverflow.com/questions/60451544/angular-spring-boot-file-download