1

I am having a problem with dowloading file from spring boot with angular2.

Here is my code from spring boot, it came from: Return generated pdf using spring MVC. I can download file dirrectly with postman but not with angular2...

@RequestMapping(value="/file/{id}", method=RequestMethod.GET)
public ResponseEntity<?> getFile(@PathVariable("id") long id) {
    UploadFile uFile = uploadFileService.getUploadFileById(id);


    byte[] contents = uFile.getContent();

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType("application/pdf"));
    headers.setContentDispositionFormData(uFile.getName(), uFile.getName());
    headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");

    return new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
}

Angular2 service

downloadFile( id: number ){
    let headers = new Headers({'Content-Type': 'application/pdf', 'Accept': 'application/pdf'});
    headers.append('Authorization',this.auth.token);
    let options = new RequestOptions( { headers: headers, responseType: ResponseContentType.Blob});

    return this.http.get(this.editUrl + id, options)
    .map(res => {return new Blob([res.blob()],{ type: 'application/pdf' })});
}

And download button

downloadFile(uFile: UploadFile){
    this.uploadFileService.downloadFile(uFile.id)
        .subscribe(
                data => window.open(URL.createObjectURL(data)),
            );
    return false;
}

When I click download button chrome opens new tab and immediately closes it not showing any file. And here are some response headers from postman.

Access-Control-Allow-Headers →Content-Type, x-requested-with, Authorization, responseType
Access-Control-Allow-Methods →POST, PUT, GET, PATCH, OPTIONS, DELETE
Access-Control-Allow-Origin →http://localhost:4200
Access-Control-Max-Age →3600
Cache-Control →must-revalidate, post-check=0, pre-check=0
Content-Disposition →form-data; name="reference.pdf"; filename="reference.pdf"
Content-Length →31576
Content-Type →application/pdf
Date →Mon, 27 Mar 2017 08:39:24 GMT
X-Content-Type-Options →nosniff
X-Frame-Options →DENY
X-XSS-Protection →1; mode=block
user3551808
  • 95
  • 2
  • 8
  • 1
    Check out these two answers, I wrote about this: http://stackoverflow.com/questions/37046133/pdf-blob-is-not-showing-content-angular-2/39657478#39657478 and http://stackoverflow.com/questions/40300252/angular2-displaying-pdf/40300966#40300966 – Stefan Svrkota Mar 27 '17 at 10:00
  • 1
    Yes those are exactly codes that I used in my solution but problem still occurs. When i try to download file in IE it opens new tab whit link something like: blob:8ASDA017-7456B-4614-AD56-47456456021 – user3551808 Mar 27 '17 at 10:18
  • 1
    It doesn't work in IE, only in Chrome and Mozilla as far as i know. – Stefan Svrkota Mar 27 '17 at 10:20
  • Oh my god you are right. I have just installed firefox and it is working fine. It is not working in my chrome. And my IE is showing: Some content or files on this webpage require a program that you don't have installed. so many hours of fixing problem that never existed.... – user3551808 Mar 27 '17 at 10:28
  • 1
    It is working in Chrome 100%, try updating to latest version. – Stefan Svrkota Mar 27 '17 at 10:39
  • 1
    Yes I have found a solution for my problem. Adblock plugin was blocking it..... – user3551808 Mar 27 '17 at 10:41

1 Answers1

0

Spring boot solution was based on Return generated pdf using spring MVC and Angular2 on PDF Blob is not showing content, Angular 2. Code in question is completly working. The reason of tab auto-closing with pdf file is Adblock plugin in chrome.

user3551808
  • 95
  • 2
  • 8