CODEWITHSUNDEEP
node.jsangularblobinternet-explorer-11xlsx
Xristos Gatzis
Xristos Gatzis

Reputation: 3

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

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.

Upvotes: 0

Views: 1207

Answers (2)

Channaveer Chila
Channaveer Chila

Reputation: 49

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 enter image description here 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)

Upvotes: 0

Piero
Piero

Reputation: 1716

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

Upvotes: 1

Related Questions