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.

by fenve

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><select class="layout-option form-control input-small"><option selected="selected" value="fluid">Fluido</option><option value="boxed">Caja</option></select></div><div class="theme-option"><span>Posición del...

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 data_type = "data:application/vnd.ms-excel";
        var tabla_div = document.getElementById("divData");
        var tabla_html = tabla_div.outerHTML.replace(/ /g, "%20");
        tabla_html = tabla_html.replace(/á/g,"&aacute;").replace(/é/g,"&eacute;").replace(/í/g,"&iacute;").replace(/ó/g,"&oacute;").replace(/í/g,"&uacute;");
        	tabla_html = tabla_html.replace(/ñ/g,"&ntilde;");
        var d = new Date(),n = d.getMonth()+1,y = d.getFullYear(); 
        var tmpElemento = document.createElement("a");
        tmpElemento.href = data_type + ", " + tabla_html;
        tmpElemento.download = "reporte_"+n+"_"+y+".xls";
				
        var link = document.createElement("a");

    if (link.download !== undefined) { // feature detection
        // Browsers that support HTML5 download attribute
        link.setAttribute("href",data_type + ", " + tabla_html);
        link.setAttribute("download", "reporte_"+n+"_"+y+".xls");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        alert('CSV export only works in Chrome, Firefox, and Opera.');
    }
     
    
});