Corrupt XLSX file after downloading

Question

I'm trying to download a xlsx file which is generated in the java backend from the angular frontend and I'm getting file as an attachment with Content-Disposition header and I'm able to download the file with the below js code, but when I try to open it, it's always corrupted

var data = response; //from server
var blob = new Blob([data], { type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml;charset=UTF-8"});
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'filname.xlsx';
link.click();

If I console log the server response, here is what I found

Edit:

When I try to open the downloaded file, see below image

Can someone help me on this?

Answer 1

I had this same issue with AngularJS 1.6.1. When I called my HTTP GET service from the browser or from window.open("url"), the xlsx file was downloaded perfectly: 304628 bytes. However, the response.data provided by AngularJS instead had 289414 bytes and the Blob wrapper had 550963 bytes, which is what is downloaded as a corrupted file. This same behavior occurred if I return the xlsx in a zip.

I solved this by setting the XMLHttpRequest.responseType property as such:

$http.get(url, {responseType:'arraybuffer'});