Export table data to Excel using jQuery

MIMEtype: Optional. The type of document you are writing to. Default value is "text/html". replace: Optional. If set, the history entry for the new document inherits the history entry from the document which opened this document.

HTML

<div class="page-container"><!-- BEGIN SIDEBAR --><div class="page-sidebar-wrapper"><div class="page-sidebar navbar-collapse collapse"><!-- add "navbar-no-scroll" class to disable the scrolling of the sidebar menu --><!-- BEGIN SIDEBAR MENU --><ul data-slide-speed="200" data-auto-scroll="true" class="page-sidebar-menu"><li class="sidebar-toggler-wrapper"><!-- BEGIN SIDEBAR TOGGLER BUTTON --><div class="sidebar-toggler hidden-phone"></div><!-- BEGIN SIDEBAR TOGGLER BUTTON --></li><li id="inicio"><a href="inicio"><i class="fa fa-home"></i><span class="title">Inicio</span><span class="selected"></span></a></li><li id="li_PadreReservas"><a href="form_reservasxusuario.php"><i class="fa fa-calendar"></i>Reservas</a></li><li id="documentacion"><a href="form_reservasxusuario.php"><i class="fa fa-paste"></i><span class="title">Correspondencia</span><span class="selected"></span></a></li><li id="li_PadreHReservas"><a href="href_Reportereservasxusuario"><i class="fa fa-calendar"></i>Historico de Reservas</a></li><!-- END SIDEBAR MENU --></ul></div></div><!-- END SIDEBAR --><!-- BEGIN CONTENT --><div class="page-content-wrapper"><div class="page-content" style="min-height:581px !important"><div class="theme-panel hidden-xs hidden-sm"><div class="toggler"></div><div class="toggler-close"></div><div class="theme-options"><div class="theme-option theme-colors clearfix"><span> Apariencia</span><ul><li data-style="default" class="color-black current color-default"></li><li data-style="blue" class="color-blue"></li><li data-style="brown" class="color-brown"></li><li data-style="purple" class="color-purple"></li><li data-style="grey" class="color-grey"></li><li data-style="light" class="color-white color-light"></li></ul></div><div class="theme-option"><span> Pantalla</span></div><div class="theme-option"><span>Posición del menú</span><select class="sidebar-pos-option form-control input-small"><option selected="selected" value="left">Izquierda</option><option...

CSS

body {
    font-size: 12pt;
    font-family: Calibri;
    padding : 10px;
}
table {
    border: 1px solid black;
}
th {
    border: 1px solid black;
    padding: 5px;
    background-color:grey;
    color: white;
}
td {
    border: 1px solid black;
    padding: 5px;
}
input {
    font-size: 12pt;
    font-family: Calibri;
}

JavaScript

$("#btnExcel").click(function (e) {
    var tmpElemento = document.createElement("a");
        // obtenemos la información desde el div que lo contiene en el html
        // Obtenemos la información de la tabla
        var data_type = "data:application/vnd.ms-excel";
        var tabla_div = document.getElementById("divData");
        var tabla_html = tabla_div.outerHTML.replace(/ /g, "%20");
        tmpElemento.href = data_type + ", " + tabla_html;
        //Asignamos el nombre a nuestro EXCEL
        tmpElemento.download = "Nombre_De_Mi_Excel.xls";
        // Simulamos el click al elemento creado para descargarlo
        tmpElemento.click();
    
});