Subscribe didn't receive a response to download the file

Question

In my project, I'm using angular6 with Springboot backend. So what I'm trying to do is popup the save dialog using this controller java class,

@RequestMapping(value = "/getGeneratedLetter/{userId}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public void genarateLetter(@PathVariable("userId") Integer userId, HttpServletResponse response) {
        System.out.println(userId);
        letterTypeService.genarateLetter(userId);
        try {
            // get Letter.docx from file path
            InputStream is = new FileInputStream("Letter.docx");
            response.setHeader("Content-Disposition", "attachment; filename = Letter.docx");
            IOUtils.copy(is, response.getOutputStream());
            response.flushBuffer();
        } catch (Exception ex) {
            throw new RuntimeException("IOError in " + ex);
        }
    }

Note: in my letterTypeService java class the letter will be generated correctly.

And finally, I'm catching the response in my angular front-end in my component,

getGenaratedLetterTemplate(letter) {
  this.data.getGenaratedLetterTemplate(letter.letterId).subscribe(response => {
    this.getBasicDataFromBackend();
    saveAs(response,  letter.fullName + '_' + letter.letterTypeName + '.docx');
    console.log(response);
  }, error => {
    console.log(error);
  });
}

In above function responce will not catch since the result is

error massage: "OK"

It's confusing because it displayed just "OK" there are not any specific error details. Additionally in my service in frontend successfully send get request and in-network tab in chrome dev tools displays "status code:200"

Further investigation When I copy and paste my get request URL in new browser window the letter download popup will be displayed successfully and when I click the save button the letter will download successfully.

So what could be the issue here?

You need the request options to pass the username/password as a header. It isn't received in your controller. The popup doesn't occur because you are doing an Ajax request, which is handled in the background of the browser. — M. Deinum, Sep 05 '19 at 14:26
You are using AJAX to download the file, hence there will be no popup as the request/response is handled transparantly. — M. Deinum, Sep 12 '19 at 08:33
@M.Deinum So what should I do for fix this. Please can you elaborate? — INDRAJITH EKANAYAKE, Sep 12 '19 at 08:59
Don't use AJAX if you want a popup but a regular link. You are doing a request in the background and hence everything is handled in the background. You need to do extra work, see https://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with-angular2 — M. Deinum, Sep 12 '19 at 09:06
is there an error in javascript console? I think there could be a cors related error messages — Andrei, Sep 12 '19 at 15:35
@thomi it should catch response correctly because when I'm pasting the requested url in new tab everything works fine — INDRAJITH EKANAYAKE, Sep 14 '19 at 14:40
I am not quite sure. I think `void` controller methods return 200 OK implicitly if they don't fail. If you want to send something to your client, you need to return something. In your case it would be `return response`. — thomi, Sep 14 '19 at 16:55

thomi · Accepted Answer · 2019-09-16T16:29:21.213

As M. Deinum indicated. AJAX does the GET request transparently, so there will be no popup. You could build a link in your client, which you can click (same as if you copied the link into a new browser). E.g. I did something similar for an app of mine, where I have the following in my template:

 <a [href]="yourUrl" class="btn btn-primary" role="button">
     <i class="fa fa-calendar"></i> <!-- or whatever you want to display -->
 </a>

And the yourUrl then would be the url to your backend. It should popup a download dialogue (I did not test it for files coming from the backend, but I think this should work).

Edit: This Answer suggests that you cannot download files directly with AJAX, primarily for security reasons. This codepen shows how to do it with Javascript, but it basically does the same thing: It creates an anchor tag, puts the data into an objectURL, adds it to the DOM, clicks it and removes itself again, so in the end you see a popup. The download attribute in the pen only works for same-origin requests, but since you set a Content-Disposition header, you could also leave it out (here is some more information about this). For this to work with Angular, you could basically take the code in the success: clause and copy it to your http call (I'd suggest replacing the vars with consts). It's not clean Angular however, because you directly interact with the DOM and if you use server-side rendering, you'd have to check for this. And it can cause memory leaks.

Thank you for your answer. I'll try with this and please can you tell me what would be the reason for get AJAX request transparently — INDRAJITH EKANAYAKE, Sep 16 '19 at 15:09

Subscribe didn't receive a response to download the file

1 Answers1