Create simple xlsx (excel file ) from javascript or Jquery

Question

This is the fiddle https://jsfiddle.net/ym4egje0/

I have two things to ask

this is creating a xls , how to create a xlsx file and it does not work in IE , only works in google chrome , how to make it work in IE ?
I want to put ColumnHead column header text and message1 and message2 should be consecutive rows .

Have to take as the index of (.) to cut into rows .

HTML

<input id="btnExport" type="button" value = "Generate File" />

JS/Jquery

$("#btnExport").click(function (e) { 

var ColumnHead = "Column Header Text";
var Messages = "\n message1.\n message2.";
   window.open('data:application/vnd.ms-excel,' + Messages);
    e.preventDefault();

});

for xlsx use `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` I hope it will work. — acmsohail, Jun 07 '17 at 06:12
now it downloading without any file extension . how to make .xlsx and also can i give any specific name other than download — shaswatatripathy, Jun 07 '17 at 06:20
Can you try this post? https://stackoverflow.com/questions/15567086/generate-excel-sheet-from-html-tables-using-jquery — M Thomas, Jun 07 '17 at 06:25
Its for Table , I dont need table that big and IE solution does not work for me — shaswatatripathy, Jun 07 '17 at 06:29
It download the file extension in chrome https://jsfiddle.net/ym4egje0/1/ Check similar question from https://stackoverflow.com/questions/2937465/what-is-correct-content-type-for-excel-files — acmsohail, Jun 07 '17 at 06:29

score 10 · Accepted Answer · answered Jun 08 '17 at 06:18

Check out this fiddle to solve your problem . it will create file for both Google chrome and IE

https://jsfiddle.net/shaswatatripathy/fo4ugmLp/1/

HTML

<input type="button" id="test" onClick="fnExcelReport();" value="download" />

<div id='MessageHolder'></div>

<a href="#" id="testAnchor"></a>

JS

var tab_text;
var data_type = 'data:application/vnd.ms-excel';


function CreateHiddenTable(ListOfMessages)
{
var ColumnHead = "Column Header Text";
var TableMarkUp='<table id="myModifiedTable" class="visibilityHide"><thead><tr><td><b>'+ColumnHead+'</b></td>  </tr></thead><tbody>';

for(i=0; i<ListOfMessages.length; i++){
    TableMarkUp += '<tr><td>' + ListOfMessages[i] +'</td></tr>';
}
TableMarkUp += "</tbody></table>";
$('#MessageHolder').append(TableMarkUp);
}

function fnExcelReport() {
var Messages = "\n message1.\n message2.";
var ListOfMessages = Messages.split(".");

CreateHiddenTable(ListOfMessages);

    tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

    tab_text = tab_text + '<x:Name>Error Messages</x:Name>';

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

    tab_text = tab_text + "<table border='1px'>";
    tab_text = tab_text + $('#myModifiedTable').html();;
    tab_text = tab_text + '</table></body></html>';

    data_type = 'data:application/vnd.ms-excel';

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        if (window.navigator.msSaveBlob) {
            var blob = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
            });
            navigator.msSaveBlob(blob, 'Test file.xls');
        }
    } else {
    console.log(data_type);
console.log(tab_text);
      $('#testAnchor')[0].click()
    }
$('#MessageHolder').html("");
}
$($("#testAnchor")[0]).click(function(){
console.log(data_type);
console.log(tab_text);
  $('#testAnchor').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#testAnchor').attr('download', 'Test file.xls');
});

CSS

.visibilityHide
{
  visibility:hidden;
}

This is excellent. My only comment is that I get the following error when trying to open it... "The file format and extension of 'Test file.xls' don't match. The file could be corrupted or unsafe. Unless you trust its source, don't open it. Do you want to open it anyway?". If I click 'Yes', it works fine. Any thoughts on how to prevent it completely? — rooch84, Apr 09 '19 at 15:35
You get that warning because you're not really producing an Excel file. Even though the code is sending an Excel mime-type and adds and .xls extension to the file, in reality the file is an HTML file (note the ` — Peter, Sep 08 '20 at 13:46

Create simple xlsx (excel file ) from javascript or Jquery

1 Answers1

Linked