I have two tables made in HTML but I need to export both in the same excel sheet.
I found this code that if I put the two tables on the same page but I do not take into account the footer of the two tables and I do not take 2 columns of the second table, where I should modify to insert the footer as see in the image:
JS Code
var tablesToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>'
, templateend = '</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>'
, body = '<body>'
, tablevar = '<table>{table'
, tablevarend = '}</table>'
, bodyend = '</body></html>'
, worksheet = '<x:ExcelWorksheet><x:Name>'
, worksheetend = '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>'
, worksheetvar = '{worksheet'
, worksheetvarend = '}'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
, wstemplate = ''
, tabletemplate = '';
return function (table, name, filename) {
var tables = table;
for (var i = 0; i < tables.length; ++i) {
wstemplate += worksheet + worksheetvar + i + worksheetvarend + worksheetend;
tabletemplate += tablevar + i + tablevarend;
}
var allTemplate = template + wstemplate + templateend;
var allWorksheet = body + tabletemplate + bodyend;
var allOfIt = allTemplate + allWorksheet;
var ctx = {};
for (var j = 0; j < tables.length; ++j) {
ctx['worksheet' + j] = name[j];
}
for (var k = 0; k < tables.length; ++k) {
var exceltable;
if (!tables[k].nodeType) exceltable = document.getElementById(tables[k]);
ctx['table' + k] = exceltable.innerHTML;
}
//document.getElementById("dlink").href = uri + base64(format(template, ctx));
//document.getElementById("dlink").download = filename;
//document.getElementById("dlink").click();
window.location.href = uri + base64(format(allOfIt, ctx));
}
})();
JSP
<thead>
<tr class="header-table">
<th>Actividades </th>
<th>Duración en horas</th>
<th>Tipo de recurso</th>
<th>% asignado</th>
<th>Duración en semanas</th>
<th>Costo por hora</th>
<th>Costo de resursos</th>
<th>Índice de riesgo</th>
<th>Bono de eficiencia</th>
<th>Costo total</th>
<th>Margen</th>
<th>Precio</th>
<th>Comisión de venta</th>
<th>Precio de venta</th>
<th>Precio promedio por hora</th>
</tr>
</thead>
<tbody >
<c:forEach var="detalle" items="${model.detalles}">
<tr >
<td>${detalle.actividad.nombreActividad}</td>
<td>${detalle.duracionHoras}</td>
<td>${detalle.recurso.nombreRecurso}</td>
<td>${detalle.porcientoAsignado}%</td>
<td>${detalle.duracionSemanas}</td>
<td>${detalle.costoHora}</td>
<td class="costoRecurso">${detalle.costoRecursos}</td>
<td class="indiceRiesgo">${detalle.indiceRiesgo}</td>
<td class="bonoEficiencia">${detalle.bonoDeEficiencia}</td>
<td class="costoTotal">$${detalle.costoTotal}</td>
<td class="margen">${detalle.margen}</td>
<td class="precio">${detalle.precio}</td>
<td class="comisionVenta">${detalle.comisionVentas}</td>
<td class="precioVenta">${detalle.precioVenta}</td>
<td class="precioPromedioVenta">${detalle.precioPromedioHora}</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr class="footer-table ">
<td style="padding:0px;"> TOTAL </td>
<td style="padding:0px;" class="totalDuracionHoras form-total" type="text">${model.proyecto.totalDuracionHoras }
</td>
<td style="padding:0px;"> </td>
<td style="padding:0px;"> </td>
<td style="padding:0px;"> TOTAL </td>
<td style="padding:0px;"> </td>
<td style="padding:0px;" class="totalCostoRecurso form-total" type="text">${model.proyecto.totalCostoRecursos}
</td>
<td style="padding:0px;" class="totalIndiceRiesgo form-total" type="text">${model.proyecto.totalIndiceRiesgo }
</td>
<td style="padding:0px;" class="totalBonoEficiencia form-total" type="text">${model.proyecto.totalBonoEficiencia }
</td>
<td style="padding:0px;" class="totalCostoTotal form-total" type="text">${model.proyecto.totalCostoTotal}
</td>
<td style="padding:0px;" class="totalMargen form-total" type="text">${model.proyecto.totalMargen}
</td>
<td style="padding:0px;" class="totalPrecio form-total" type="text"> ${model.proyecto.totalPrecio}
</td>
<td style="padding:0px;" class="totalComisionVenta form-total" type="text">${model.proyecto.totalComisionVenta}
</td>
<td style="padding:0px; color: red;" readonly="true" class="totalPrecioVenta form-total" type="text"> ${model.proyecto.totalPrecioVenta}
</td>
<td style="padding:0px; color: red;" readonly="true" class="totalPrecioPromedio form-total" type="text">${model.proyecto.totalPrecioPromedio}
</td>
</tr>
</tfoot>
</table>
</div><br><br>
<!-- ========================================================== -->
<div style="width:50%;" class="row">
<table id="extras" class="table table-bordered table" >
<thead>
<tr class="header-table">
<th>Descripción </th>
<th>Mensual</th>
<th>Anual</th>
</tr>
</thead>
<tbody>
<tr>
<td>Soporte y mantenimiento de aplicación</td>
<td>
<form:input style="background:white;" readonly="true" class=" montoMensualMantenimiento form-control input-table" path="montoMensualMantenimiento" type="text"/>
</td>
<td>
<form:input style="background:white;" readonly="true" class=" montoAnualMantenimiento form-control input-table" path="montoAnualMantenimiento" type="text"/>
</td>
</tr>
<tr>
<td>Costos de infraestructura mensual</td>
<td>
<form:input style="background:white;" readonly="true" class=" montoMensualInfraestructura form-control input-table" path="montoMensualInfraestructura" type="text"/>
</td>
<td>
<form:input style="background:white;" readonly="true" class=" montoAnualInfraestructura form-control input-table" path="montoAnualInfraestructura" type="text"/>
</td>
</tr>
<tr>
<td>Precio total del proyecto</td>
<td>
<form:input style="background:white;" readonly="true" id="montoProyecto" class=" montoProyecto form-control input-table" path="montoProyecto" type="text"/>
</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="footer-table form-total">
<td style="padding:0px;"> TOTAL </td>
<td style="padding:0px;">
<form:input readonly="true" class="totalProyectoMensual form-control input-table" path="totalProyectoMensual" type="text"/>
</td>
<td style="padding:0px;" readonly="true" id="totalProyectoAnual" class="totalProyectoAnual form-control input-table">
<form:input readonly="true" class="totalProyectoAnual form-control input-table" path="totalProyectoAnual" type="text"/>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="pull-right">
<a class="btn btn-info" href="ListarProyecto" >Volver</a>
</div>
<a id="dlink" style="display:block;"></a>
<input type="button" onclick="tablesToExcel(['table', 'extras'], ['first', 'second'], 'myfile.xls')" value="Export to Excel">