Download MS Excel/Word via AngularJS call to a REST service

Question

I have an AngularJS application that sends a POST request to a REST service (onClick method of a button). The POST request contains a JSON object with various settings. The REST service uses those settings to create a MS Word/Excel file.

At the moment the REST service sends the contents of the file back as a byte stream (in response to the previously mentioned POST request). When the file arrives I want a save-file-dialog to show up, where I can save the file. The backend is a Spring Boot app using Spring-MVC.

Can this be done in AngularJS?

This has got less to do with AngularJS and more to do with your server. What are you using in the backend? — callmekatootie, Jul 31 '15 at 12:26
You just have to call you backend method from ng-href and it will download any file which it returns — Hmahwish, Jul 31 '15 at 12:30
Update your post with the tag for Spring MVC or something equivalent. That community should be able to help you out. It requires you to set the response header correctly when sending the file so that the browser identifies that its a file that needs to be downloaded. — callmekatootie, Jul 31 '15 at 13:00
@callmekatootie you were right, once I set the correct headers in the backend it worked. Just like magic. — Ciri, Jul 31 '15 at 13:17
@Serban Awesome. You can answer your own post and mention the headers that you added so that it can help somebody else. — callmekatootie, Jul 31 '15 at 13:19
@Serban can you post what the correct headers are? I need to solve the very same problem in my project.... — Gianmarco, Feb 03 '16 at 11:02
@Gianmarco I forgot to add an answer to my question. I posted the entire controller function, hope it helps. — Ciri, Feb 03 '16 at 14:25

score 1 · Answer 1 · edited May 23 '17 at 10:28

If you can't use something like location.href to get your data to the server instead of post it, then check it out others using html 5:

more info AngularJS $http-post - convert binary to excel file and download

$http({
    url: 'your/webservice',
    method: 'POST',
    responseType: 'arraybuffer',
    data: json, //this is your json data string
    headers: {
        'Content-type': 'application/json',
        'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    }
}).success(function(data){
    var blob = new Blob([data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    saveAs(blob, 'File_Name_With_Some_Unique_Id_Time' + '.xlsx');
}).error(function(){
    //Some error log
});

I can't restrict the usage to HTML5 only. What I did was to add the correct headers to the response in the backend and let the success() function empty. — Ciri, Jul 31 '15 at 13:19

score -1 · Accepted Answer · answered Feb 03 '16 at 14:24

This is the Controller function I ended up using:

@RequestMapping(value = "/downloadDocx", method = RequestMethod.POST)
@ResponseStatus(value = HttpStatus.CREATED)
public void downloadDocx(@RequestBody DocxInputBean docxInput,
        HttpServletResponse response) throws Exception {

    File docxFile = outputManager.createDocxProfile(docxInput);

    response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document");

    InputStream is = new FileInputStream(docxFile);
    org.apache.commons.io.IOUtils.copy(is, response.getOutputStream());
    response.flushBuffer();
    is.close();
}

Download MS Excel/Word via AngularJS call to a REST service

2 Answers2