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, Dec 15 '16 at 08:30
Then I suggest you use `$(document).on('click', '.toExcelButton', function(){ // })` — Ionut Necula, Dec 15 '16 at 08:41
Can you post the HTML with the table values too? At least to make it a minimal working example. — Ionut Necula, Dec 15 '16 at 08:47
@lonut. please find the plnkr http://plnkr.co/edit/MseEYx?p=preview — jinish shah, Dec 15 '16 at 08:52
@Lain because everyone learns everything you can do with jquery in one try — Alexandru Severin, Dec 15 '16 at 08:53
@Alexandru Severin: Then why not create the anchor with jquery as well? Why all that mashed up horrid inconsistent code? It has to be added to the DOM anyway to work in IE - which also is part of the OP issue. — Lain, Dec 15 '16 at 08:56

score 3 · Accepted Answer · edited May 23 '17 at 12:33

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 '17 at 12:33

Community

1
1

answered Dec 15 '16 at 08:58

Lain

3,657
1
20
27

Can you please help me on how i can achieve the same in IE? – jinish shah Dec 15 '16 at 09:00
Tired the same but no luck – jinish shah Dec 15 '16 at 09:22
@jinish shah: Any fiddle to see what was tried and did not work? – Lain Dec 15 '16 at 09:25
Actually missed out something. It's working fine now. Thanks a lot – jinish shah Dec 15 '16 at 10:54
@jinish shah: Alright. Please remember to accept/mark the answer if it provided what was looked for. – Lain Dec 15 '16 at 11:57
Sure. One thing if need to apply border to the table in generated excel i tried this $(tT).find('table').attr('border', 1). But border isn't appearing in excel file. – jinish shah Dec 15 '16 at 12:33
I dunno, but jquery is using css() for styles and not attr(). – Lain Dec 15 '16 at 12:35
ok no issues. Actually want to apply to entire table so for that have to attr() only & not css(). – jinish shah Dec 15 '16 at 13:03

score 0 · Answer 2 · answered Dec 15 '16 at 08:53

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 '16 at 08:53

Vysakh

93
1
11

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. – jinish shah Dec 15 '16 at 08:57

Html tables within div export to excel

2 Answers2

Edit: