Html tables within div export to excel

Question

  <script type="text/javascript">
        $(document).ready(function () {
            //getting values of current time for generating the file name
            $(".toExcelButton").click(function(){
            var dt = new Date();
            var day = dt.getDate();
            var month = dt.getMonth() + 1;
            var year = dt.getFullYear();
            var hour = dt.getHours();
            var mins = dt.getMinutes();
            var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
            //creating a temporary HTML link element (they support setting file names)
            var a = document.createElement('a');
            //getting data from our div that contains the HTML table
            var data_type = 'data:application/vnd.ms-excel';
            var table_div = document.getElementById('dvData');
            var table_html = table_div.outerHTML.replace(/ /g, '%20');
            a.href = data_type + ', ' + table_html;
            //setting the file name
            a.download = 'exported_table_' + postfix + '.xls';
            //triggering the function
            a.click();
            //just in case, prevent default behaviour
            e.preventDefault();
                })
        });
    </script>

Need to export div tables to excel. The above code works fine in Chrome but not working in IE. Can anyone help me out on the same.

Do you have any errors? Also, on what version of IE does not "work"? — Ionut Necula
– Ionut Necula, Commented Dec 15, 2016 at 8:30
Then I suggest you use $(document).on('click', '.toExcelButton', function(){ // }) — Ionut Necula
– Ionut Necula, Commented Dec 15, 2016 at 8:41
Can you post the HTML with the table values too? At least to make it a minimal working example. — Ionut Necula
– Ionut Necula, Commented Dec 15, 2016 at 8:47

Community · Accepted Answer · 2017-05-23 12:33:44Z

3

In IE a dynamically created anchor tag needs to be added to the DOM to execute its click event. Furthermore the download attribute is not supported in the IE:

Download attribute on A tag not working in IE

Edit:

Recently I posted many answers handling this issue, here are two of those:

image does not download with it's own extension

JS Base64 string to downloadable pdf - Edge

Basically you have to use msSaveOrOpenBlob() in IE:

var tF = 'Whatever.xls';
var tB = new Blob(..);

if(window.top.navigator.msSaveOrOpenBlob){
    //Store Blob in IE
    window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
    //Store Blob in others
    var tA = document.body.appendChild(document.createElement('a'));
    tA.href = URL.createObjectURL(tB);
    tA.download = tF;
    tA.style.display = 'none';
    tA.click();
    tA.parentNode.removeChild(tA)
}

In the case above:

var tT = new XMLSerializer().serializeToString(document.querySelector('table')); //Serialised table
var tF = 'Whatever.xls'; //Filename
var tB = new Blob([tT]); //Blob

if(window.top.navigator.msSaveOrOpenBlob){
    //Store Blob in IE
    window.top.navigator.msSaveOrOpenBlob(tB, tF)
}
else{
    //Store Blob in others
    var tA = document.body.appendChild(document.createElement('a'));
    tA.href = URL.createObjectURL(tB);
    tA.download = tF;
    tA.style.display = 'none';
    tA.click();
    tA.parentNode.removeChild(tA)
}

https://jsfiddle.net/23ao1v0s/1/

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Dec 15, 2016 at 8:58

Lain

3,7361 gold badge22 silver badges28 bronze badges

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

8 Comments

jinish shah Over a year ago

Can you please help me on how i can achieve the same in IE?

jinish shah Over a year ago

Tired the same but no luck

Lain Over a year ago

@jinish shah: Any fiddle to see what was tried and did not work?

jinish shah Over a year ago

Actually missed out something. It's working fine now. Thanks a lot

Lain Over a year ago

@jinish shah: Alright. Please remember to accept/mark the answer if it provided what was looked for.

|

Vysakh · Accepted Answer · 2016-12-15 08:53:43Z

0

Please check the below given link. I think you will get a solution for your question https://github.com/rainabba/jquery-table2excel

answered Dec 15, 2016 at 8:53

Vysakh

931 silver badge11 bronze badges

1 Comment

jinish shah Over a year ago

In my case i am going to have multiple tables in a single div. For above plugin i had to specify id's to table, also each table will generate a seperate excel file. Where as i want all tables within single excel file.

Collectives™ on Stack Overflow

Html tables within div export to excel

2 Answers 2

Edit:

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit:

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related