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
– acmsohail, Commented Jun 7, 2017 at 6:12
now it downloading without any file extension . how to make .xlsx and also can i give any specific name other than download — shaswatatripathy
– shaswatatripathy, Commented Jun 7, 2017 at 6:20
Can you try this post? stackoverflow.com/questions/15567086/… — M Thomas
– M Thomas, Commented Jun 7, 2017 at 6:25
Its for Table , I dont need table that big and IE solution does not work for me — shaswatatripathy
– shaswatatripathy, Commented Jun 7, 2017 at 6:29
It download the file extension in chrome jsfiddle.net/ym4egje0/1 Check similar question from stackoverflow.com/questions/2937465/… — acmsohail
– acmsohail, Commented Jun 7, 2017 at 6:29

tripathy · Accepted Answer · 2017-06-08 06:18:12Z

11

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;
}

answered Jun 8, 2017 at 6:18

tripathy

3852 gold badges6 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rooch84 Over a year ago

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?

tripathy Over a year ago

@rooch84 I still didnt find the solution for that

Peter Over a year ago

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 <html at the start of the output) with some Excel-specific code. To avoid the error, you would have to produce a real (binary) Excel file.

Collectives™ on Stack Overflow

Create simple xlsx (excel file ) from javascript or Jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related