IE11 saves downloaded .xlsx files corrupted in angular using blob (works locally)

Question

When I download a .xlsx file from server, the downloaded file does not have the proper structure (stylesheet, worksheet etc.) but it is just a binary file with .xlsx extension.

Notice: It works perfectly on Chrome, Firefox, Edge and locally even in IE11 and I have set internet explorer's security settings to be the same for local and remote websites.

This is how the server creates the response:

const buffer = json2xls(values, { fields: fields });
res.end(buffer, 'binary');

This is how the client saves fetched data:

downloadFile(selectedReport) {
const blob = new Blob([selectedReport.blob()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
FileSaver.saveAs(blob, `result.xlsx`);
}

I have tried replacing:

FileSaver.saveAs(blob, result.xlsx);

with:

window.navigator.msSaveBlob(blob, result.xlsx);

but the result remains the same.

Notice: the content of the corrupted result.xlsx file is the same as the buffer sent by the server.

Answer 1

Did you check out your http server MIME Types ? the one for .xlsx should be application/vnd.openxmlformats-officedocument.spreadsheetml.sheet