Working in IE 11 but not working Google Chrome - excel file download using jquery

Question

here is the fiddle

File download is happening for IE (internet explorer) not working for google chrome .

I cant change the HTML and CSS part .

Cant Use any external library

I Think i have to change the part

 else {
                $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
                $('#test').attr('download', 'Test file.xls');
            }

But what to chnage so that it works for both google chrome and IE

HTML

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

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

JS

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>';
console.log(ListOfMessages);
console.log(ListOfMessages.length);
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);

    var 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>';

    var 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 {
        $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#test').attr('download', 'Test file.xls');
    }
$('

#MessageHolder').html("");
}

CSS

.visibilityHide
{
  visibility:hidden;
}

score 1 · Answer 1 · answered Jun 07 '17 at 15:48

1

The encodeURIComponent call isn't going to do the trick. To do what you're trying to do, you have to Base64-encode the tab_text variable and then stick that into the href attribute. The A tag will end up looking like this:

<a href="data:application/vnd.ms-excel;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv...">Click here to download</a>

According to another SO post, you're correct in using the download attribute to specify the filename.

answered Jun 07 '17 at 15:48

Xavier J

4,326
1
14
25

should i do like tab_text = tab_text + 'base64-encode'; – shaswatatripathy Jun 07 '17 at 16:00
as i dont have any in html – shaswatatripathy Jun 07 '17 at 16:00
I presumed `#test` was the ID of an `` tag. – Xavier J Jun 07 '17 at 16:08
its a button see the html also i tried this , $('#test').attr('href', data_type + 'base64,' + tab_text); $('#test').attr('download', 'Test file.xls'); but not working – shaswatatripathy Jun 07 '17 at 16:10
A button isn't going to do anything with an href attribute. – Xavier J Jun 07 '17 at 16:11
i can add a link but cant write onclick on that . how to do that . any idea – shaswatatripathy Jun 07 '17 at 19:42

score 1 · Accepted Answer · answered Jun 08 '17 at 06:13

check out this fiddle , now it will work for IE and google chrome . https://jsfiddle.net/shaswatatripathy/fo4ugmLp/1/

so it can be treated as client side excel file creation solution . I just added one element but if you want you can create it in jquery and add it to the same div

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

Working in IE 11 but not working Google Chrome - excel file download using jquery

2 Answers2