Export to Excel

export table data to Excel

by Avinashullal

HTML

<button id="btnExport">Export</button>
<div id="divtblReport">
    <table id="tblReport" class="table table-bordered table-striped table-condensed table-hover ctable" style="width: 100%;">
        <tbody>
            <tr class="skipTr">
                <td colspan="7" style="  background-color: #fff !important; color: #4EA2F9;"><strong><h4 class="subhead">Plan Group | eMarketing</h4></strong>

                </td>
            </tr>
            <tr class="skipTr">
                <th style=" width: 350px; background-color: #C9DDC1;  ">Plan Type</th>
                <th style="width: 180px; background-color: #C9DDC1; ">15Q3</th>
                <th style="  width: 180px; background-color: #C9DDC1;">15Q4</th>
                <th style="  width: 180px; background-color: #C9DDC1;">16Q1</th>
                <th style="  width: 180px; background-color: #C9DDC1;">16Q2</th>
                <th style="  width: 180px; background-color: #C9DDC1;">16Q3</th>
                <th style="  width: 180px;  background-color: #C9DDC1;">16Q4</th>
            </tr>
            <tr>
                <td style="text-align:left;   background-color: #F2F2F2;">eDM</td>
                <td style="background-color: #F2F2F2;"><span style="color:red !important;">T1</span>, <span style="color:red !important;">ftdfhfgh</span>, <span>Test1232</span>, <span>w3w4</span>, <span>fghfgh</span>, <span style="color:red !important;">gfghf</span>, <span style="color:red !important;">xcvxcvcx</span>

                </td>
                <td style="background-color: #F2F2F2;"><span></span>

                </td>
                <td style="background-color: #F2F2F2;"><span></span>

                </td>
                <td style="background-color: #F2F2F2;"><span>efefefsef</span>

                </td>
                <td style="background-color: #F2F2F2;"><span></span>

                </td>
                <td style="background-color: #F2F2F2;"><span></span>

                </td>
            </tr>
       ...

JavaScript

$(function () {

    $('#btnExport').on('click', function (e) {
        fnExcelReport();

        e.preventDefault();
    });
});

function fnExcelReport() {
    var tab_text;
    var textRange;
    var j = 0;
    var tab;
    //   var tab = document.getElementById('tblReport'); // id of table
    $("#divtblReport > table").each(function () {
        console.log('hi');
        tab = this;
        tab_text = tab_text + "</br>" + "<table border='2px'><tr bgcolor='#87AFC6'>";
        for (j = 0; j < tab.rows.length; j++) {
            tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
            //tab_text=tab_text+"</tr>";
        }

        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
        tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
        tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
        tab_text = tab_text + "</table>";
    });

    //  console.log(tab_text);

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !! navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
    {
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, "QuarterlyReport.xls");
    } else //other browser not tested on IE 11
    sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));


}