Export Table to Excel

Testing JavaScript-export of an HTML-table directly to Excel

by Geo George

HTML

<body>
    <table id="dvData">
        <tbody>
            <tr>
                <th></th>
                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
            </tr>
            <tr>
                <th class="tLeft">Listerios</th>
                <td class="tRight">1</td>
                <td class="tRight">0</td>
                <td class="tRight">6</td>
            </tr>
            <tr>
                <th class="tLeft">Paratuberkulos</th>
                <td class="tRight">12</td>
                <td class="tRight">9</td>
                <td class="tRight">6</td>
            </tr>
            <tr>
                <th class="tLeft">Rabies</th>
                <td class="tRight">0</td>
                <td class="tRight">0</td>
                <td class="tRight">0</td>
            </tr>
            <tr>
                <th class="tLeft">Salmonella</th>
                <td class="tRight">16</td>
                <td class="tRight">21</td>
                <td class="tRight">19</td>
            </tr>
            <tr>
                <th class="tLeft">Totalt</th>
                <td class="tRight">29</th>
                    <td class="tRight">30</th>
                        <td class="tRight">41</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <input id="btnExport" type="button" value="Export to excel">
                </td>
        </tfoot>
    </table>
</body>

CSS

table {
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    text-align: left;
    border-collapse: collapse;
}
tbody th {
    padding: 4px;
    font-weight: normal;
    font-size: 13px;
    color: #039;
    background: #b9c9fe;
    border-top: 1px solid #fff;
}
tbody td {
    padding: 4px;
    background: #e8edff;
    border-top: 1px solid #fff;
    color: #669;
}
tbody tr:first-child :first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
tbody tr:first-child :last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
tbody tr:first-child :only-child {
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
tbody tr:last-child :first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
tbody tr:last-child :last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
tbody tr:last-child th, tbody tr:last-child td {
    background: silver;
    color: gray;
}
tfoot td {
    background: none;
    padding-top: 4px;
}
.tRight {
    text-align: right;
}
.tLeft {
    text-align: left;
}
#btnExport {
    float: right;
}

JavaScript

$("#btnExport").click(function (e) {
    //getting values of current time for generating the file name
    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;charset=utf-8';
    
    var table_html = $('#dvData')[0].outerHTML;
//    table_html = table_html.replace(/ /g, '%20');
    table_html = table_html.replace(/<tfoot[\s\S.]*tfoot>/gmi, '');
    
    var css_html = '<style>td {border: 0.5pt solid #c0c0c0} .tRight { text-align:right} .tLeft { text-align:left} </style>';
//    css_html = css_html.replace(/ /g, '%20');
    
    a.href = data_type + ',' + encodeURIComponent('<html><head>' + css_html + '</' + 'head><body>' + table_html + '</body></html>');
    
    //setting the file name
    a.download = 'exported_table_' + postfix + '.xls';
    //triggering the function
    alert('koookook');
    a.click();
    //just in case, prevent default behaviour
    e.preventDefault();
});