Download XLSX getting corrupted

Question

I'm trying to convert a HTML table to XLSX uisng AngularJS or even plain JavaScript.

When I'm converting to XLS using below its downloading fine and a XLS file is opening.

var blob = new Blob([template], {type: "data:application/vnd.ms-excel"});
window.navigator.msSaveOrOpenBlob(blob, "myExcel.xls"); 

But, my requirement wants the file in XLSX, so I changed the MIME type and extension of file in the same code like below,

var blob = new Blob([template], {type: "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
window.navigator.msSaveOrOpenBlob(blob, "myExcel.xlsx");

But when I'm opening the downloaded xlsx file its corrupted and MS office is trowing error popup.

What I'm doing wrong and how I can convert a HTML table to XLSX? Even alternate ideas also accepted.

PS: The table is quite complicated, rows within columns and all, so plugins like ALASQL, JS-XLSX is not helping.

Relational

Were you able to solve this issue? – Malony

@Agramer Its seems like its not possible to it from Angular side. So we have done this in Service side (JAVA) and download the XLSX sent in response. – Relational

Thank you for the answer - I am experiencing similar issue with Vue.js. – Malony

Answer 1

The problem may lie in the type XLSX. This post states that it is a zipped set of XLS files. Have a read through. I cannot comment, because my score isn't over 50 yet, so I'm posting as an answer.

https://mcmap.net/q/657557/-how-to-export-an-html-table-as-a-xlsx-file

Chit

Answer 2

just try to change mime-type

change it to application/vnd.ms-excel it works fine with XLSX also.

var blob = new Blob([template], {type: "application/vnd.ms-excel"});
window.navigator.msSaveOrOpenBlob(blob, "myExcel.xlsx");

Try this code.

Selfsacrifice

Already tried, its not working, corrupted file. Seems like MS have update some XLSX prorperties. – Relational

it will ask for yes no, if you press yes it should open up. can you try and let me know? – Selfsacrifice

No it won't ask for Yes or No. It will say file extension is invalid and blah blah. Just press OK and exit. – Relational

can you create fiddle or pen? – Selfsacrifice

Answer 3

try to edit the file type,

const blob = new Blob([data], {
    // type: 'application/vnd.ms-excel;'    //old 
       type: 'application/vnd.openxmlformats- officedocument.spreadsheetml.sheet;
charset=utf-8'    //try this new
          })

Pyatt