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

Answer 2

First check your response object by consoling it, if the data type is application/xlsx or application/.xlsx then use below code.

    const blob = new Blob([data], {type: "application/xlsx"});
    const url= window.URL.createObjectURL(blob);
    window.open(url)

When response is not 'application/xlsx' then mention what data type you are getting in the console

const blob = new Blob([data], 
{type: "application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet"});
    const url= window.URL.createObjectURL(blob);
    window.open(url)