Export html table data to excel using jQuery

If you are looking for a solution to export the html table data using jQuery, this post will help you in that.



Let’s get started


Step 1 - Prerequisite


            jQuery - https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js


Step 2 – Html Code


<div ><img src="~/Images/Excel.png" class="export" id="exportToExcel" /></div>


<iframe id="frmExcel" style="display: none"></iframe>

<table id="tblDDeltaDrData">

                    <tr>

                        <th class="tblHeader"> Account</th>

                        <th class="tblHeader">Index</th>

                        <th class="tblHeader">As Of Time</th>

                        <th class="tblHeader">Value</th>

                        <th class="tblHeader">Comments</th>

                    </tr>

<tr>

                        <td class="tblHeader">Abc123</td>

                        <td class="tblHeader">12</td>

                        <td class="tblHeader">18:20</td>

                        <td class="tblHeader">25</td>

                        <td class="tblHeader">Comments</td>

                    </tr>

</table>

Step 3 jQuery code

$(document).ready(function () {

    $('.export#exportToExcel').click(function(){

        var tab_text = ""
;

        var textRange;

        var j = 0, i=0;

           

        //Header Row formatting

        var headerRow = $('[id*=tblDDeltaDrData] tr:first th');

       

        if (headerRow.length > 0) {

            for (i = 0; i < headerRow.length - 1; i++) {

                if (headerRow[i].style.display != 'none')

                    tab_text += '
'
+ headerRow[i].innerHTML + '

';

            }

        } else {

            return;

        }

        tab_text += '

';

        i = 0;

        //Table row and cell formatting

        var rows = $('[id*=tblDDeltaDrData] tr:not(:has(th))');

        for (j = 0; j < rows.length; j++) {

            var tds = rows[j].getElementsByTagName('td');

            tab_text += " " ;

            for (i = 0; i < tds.length-1; i++) {

                if (tds[i].style.display != 'none') {

                    tab_text = tab_text + "
"
+tds[i].innerHTML + "

";

                }

            }

            tab_text += "

";

        }

        tab_text = tab_text + "

";

        tab_text = tab_text.replace(/]*>|<\/A>/g, ""); //remove if u want links in your table

        tab_text = tab_text.replace(/]*>/gi, ""); // remove if u want images in your table

        tab_text = tab_text.replace(/]*>|<\/input>/gi, ""); // reomves input params

        var ua = window.navigator.userAgent;

        var msie = ua.indexOf("MSIE ");

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // For IE

        {

            frmExcel.document.open("txt/html", "replace");

            frmExcel.document.write(tab_text);

            frmExcel.document.close();

            frmExcel.focus();

            sa = txtArea1.document.execCommand("SaveAs", true, "dDeltaDr.xls");

        }

        else {

            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));

        }

        return (sa);

    });

    });