Exportar Tabla HTML a Excel

Tuto simple y corto.

Resulta que, en el sistema que estoy haciendo en el trabajo, me pidieron exportar la info de unas tablas hacia un archivo excel.

Buscando por Google, llegué a la solución🙂 y es bastante simple.

Primero, definimos la tabla. En mi caso algo así:

<table class="table" id="tabla">
    <thead>
        <tr>
            <th>Folio</th>
            <th>Paciente</th>
            <th>Fecha</th>
            <th>Nº Bono</th>
            <th>Isapre</th>
            <th>Plan</th>
            <th>Prestación</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
<%
    String rut = (String)session.getAttribute("Rut");
    rut = rut.split("-")[0];
    Cartola c = new Cartola(Integer.parseInt(rut));
    List<Map<String, Object>> Listado = (request.getParameter("fi") != null) ?
        c.getListado(request.getParameter("fi"), request.getParameter("ft")) :
        c.getListado();
    if(Listado != null){
        for(Map<String, Object> mapa : Listado){
            String nombre = mapa.get("NOM_PAC").toString().split(" ")[2] +
                    " " + mapa.get("NOM_PAC").toString().split(" ")[0] +
                    " " + mapa.get("NOM_PAC").toString().split(" ")[1].substring(0,1) + ".";
            mapa.put("FECHA_ING", mapa.get("FECHA_ING").toString().split(" ")[0]);
            String fecha = mapa.get("FECHA_ING").toString().split("-")[2] +"-"+
                    mapa.get("FECHA_ING").toString().split("-")[1] +"-"+
                    mapa.get("FECHA_ING").toString().split("-")[0];
        %>
        <tr>
            <td><%=mapa.get("FOLIO")%> </td>
            <td><%=nombre%> </td>
            <td style="width: 10%"><%=fecha%> </td>
            <td><%=mapa.get("NUM_BONO")%> </td>
            <td><%=mapa.get("NOMBRE_ISAPRE")%></td>
            <td><%=mapa.get("COD_PLAN")%></td>
            <td><%=mapa.get("NOMBRE_PRES").toString().substring(0, 25) %></td>
            <td><%=mapa.get("TOTAL")%></td>
        </tr>
    <%
            }
        }
%>
    </tbody>
</table>

Como ven, lo importante es ponerle un ID a la tabla.

Ahora, agregamos un botón para exportar, un input hidden para guardar la tabla que se enviará al servidor.

<form action="ServletCartola" method="post" id="export">
    <input type="hidden" id="datos" name="Exportar" />
    <button>Exportar a Excel</button>
</form>

Listo ! Ahora el código en jQuery para copiar el contenido de la tabla al input hidden

$("#export").submit(function(){
    $("#datos").val($("$<div>").append($("#tabla").eq(0).clone()).html());
});

Ahora en el lado servidor, cambiamos la cabecera y el tipo de respuesta

response.setContentType("application/force-download");
response.setHeader("Content-Transfer-Encoding", "binary");
response.setHeader("Content-Disposition","attachment; filename=\"" + "cartola.xls\"");//fileName);
out.print(request.getParameter("Exportar"));

Y eso es todo !😯

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en Java, JavaScript, Tips. Guarda el enlace permanente.

13 respuestas a Exportar Tabla HTML a Excel

  1. IKKY dijo:

    NO ENTENDI DONDE VA ESTO

    response.setContentType(“application/force-download”);
    response.setHeader(“Content-Transfer-Encoding”, “binary”);
    response.setHeader(“Content-Disposition”,”attachment; filename=\”” + “cartola.xls\””);//fileName);
    out.print(request.getParameter(“Exportar”));

    SORRY SOY NUEVO EN ESTO AGRADECERIA SI ME DIJIERAS COMO VA😉

  2. Anónimo dijo:

    no entendi bien, como exportar, al final ese archivo servletcartola no tiene extension? como es la cosa…

    • MaritoCares dijo:

      El “archivo” servletcartola es tu servlet… lo que hace es tomar la info plana de la tabla (html) y devolverla como un archivo excel.

      Puedes abrir el export que te entrega con un bloc de notas, y te darías cuenta que es html puro y duro.

      Es excel el que se encarga de “entenderlo”

  3. Jonathan dijo:

    Hola, hice todo lo que dices y me genera un archivo excel de 0 bytes.
    No sé si hay que cambiar o renombrar algo.
    Ya estoy un paso mas cerca =)

    • MaritoCares dijo:

      Hola !
      Mira, lo que en realidad hace el código, es que “imprimes” un trozo de html como un archivo excel.

      En el servlet podrías hacer un out.write(“_CODIGO_HTML_TABLA_”); y te entregaría la tabla como respuesta.

      Paso a paso:

      1. response.setContentType(“application/force-download”); con esto le dices que la respuesta del servlet va a ser una descarga, y la vas a forzar. Nada de dar link o redirigir a otro lado.
      2. response.setHeader(“Content-Transfer-Encoding”, “binary”); le dices que va a ser un formato como un archivo, no una respuesta de texto, por ejemplo.
      3. response.setHeader(“Content-Disposition”,”attachment; filename=\”” + “cartola.xls\””); Lo que vamos a descargar, tiene un nombre cartola y extensión xls que windows (o donde estes) la reconoce como un excel.
      4. out.print(request.getParameter(“Exportar”)); por último, el contenido de tu respuesta, va a ser lo que envías desde la página web. Éste contenido viene en una variable que se llama Exportar

      Espero te haya quedado más claro🙂

  4. Roberto dijo:

    Hay mas formas de hacerlo solo hay que leer bien las especificaciones de los formatos, sin ofender pero da pena ver un código así en el 2013, tantas malas practicas de programación java que me sangraron los ojos.

  5. enrique dijo:

    yo quiero hacer esto mismo pero con openerp,mi duda esta,en que yo pondria en esta linea de codigo: <form action="ServletCartola",ya que no trabajo con servlet,para que me redireccione a mi servidor.

  6. israel dijo:

    $(“#export”).submit(function(){
    $(“#datos”).val($(“$”).append($(“#tabla”).eq(0).clone()).html());
    });

    esta parte del codigo donde va y eso del ServletCartola no lo entiendo todo esto va en un solo archivo soy nuevo en esto disculpa…!!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s