Unable to Download xlsx on client side using Filesaver.JS in React - reactjs

Question

I tried the previous solutions on stackoverflow as well as other options including defining responseType as "arraybuffer" and "blob", I'm not able to download xlsx file generated on the client side. The repsonse.data is in the form of byte[].
I see that the file has contents, but when I try to open it, it says - "The file format or file extension is not valid "
UI Snippet:
axios.post('/api/report/generateReport', {}, {
params: {
reportId: this.state.reportId,
lob: this.state.lob
}
}, {responseType: 'arraybuffer'})
.then(function (response) {
var blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
FileSaver.saveAs(blob, 'Metrics.xlsx');
})
Backend Snippet
#POST
#Path("/generateReport")
public Response generateReport(#QueryParam("reportId") int reportId, #QueryParam("lob") String lob) {
Response response = null;
byte[] contents = null;
contents = metricsReport.generateReport(lob);
response = Response.status(Response.Status.OK).entity(contents).header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.header("Content-Disposition", "attachment; filename=Metrics.xlsx").allow("OPTIONS")
.build();
return response;
}

Answer 1

I think you need to set content-type to application/octet-stream in the response from the server.
Something like(spring boot)-
return ResponseEntity.ok().contentLength(file.contentLength())
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.header("Content-disposition", "attachment; filename=Metrics.xlsx")
.body(inputStreamResource)