0

Estoy usando JSPDF para exportar una tabla a pdf , pero la tabla que estoy exportando tiene una columna con botones de acción, el problema es que al exportar la tabla también se exportan los botones y quisiera saber como puedo exportar solo algunas columnas de la tabla para así exportar la tabla menos sin la columna de los botones.

Aca está la tabla

<div class="panel-body panel panel-primary" id="content">
                <form method="POST" action="AdministrarReservasServlet">
                    <button type="submit" name="btnMostrarReservas" class="btn btn-primary btn-sm"> <span class="glyphicon glyphicon-refresh"></span> Mostrar</button>
                    <button type="button" name="btnVolver" class="btn btn-success btn-sm" onclick="location.href='barraCentral.jsp'"><span class="glyphicon glyphicon-arrow-left"></span> Volver</button>
                      <br><br><br>
                        <table class="table-condensed table-hover table-responsive" id="resultado">
                            <thead>    
                                <tr class="">
                                    <th class="btn-info">N° Reserva</th>
                                    <th class="btn-info">Origen</th>
                                    <th class="btn-info">Destino</th>
                                    <th class="btn-info" style="display:none">Origen Vuelo</th>
                                    <th class="btn-info">Piezas</th>
                                    <th class="btn-info">Kilos</th>
                                    <th class="btn-info">Volumen</th>
                                    <th class="btn-info">Estado</th>
                                    <th class="btn-info" style='display:none'>Notas</th>
                                    <th class="btn-info">Fecha Creación</th>
                                    <th class="btn-info">Fecha Embarque</th>
                                    <th class="btn-info">Tipo</th>
                                    <th class="btn-info">Prioridad</th>
                                    <th class="btn-info" style="display:none">Forma Pago</th>
                                    <th class="btn-info" style="display:none">Tarifa</th>
                                    <th class="btn-info" style="display:none">Tipo Moneda</th>
                                    <th class="btn-info">Rut Cliente</th>
                                    <th class="btn-info">Nombre Cliente</th>
                                    <th class="btn-info" style="display:none">Telefono Cliente</th>
                                    <th class="btn-info" style="display:none">Direccion Cliente</th>
                                    <th class="btn-info" style="display:none">Email Cliente</th>
                                    <th class="btn-info">Acción</th>
                                    <!--<th class="btn-info">Cliente</th>
                                    <th class="btn-info">Usuario</th>
                                    <th class="btn-info">Acción</th>-->

                                </tr>
                            </thead>
                            <tbody>
 <%               
     try
          {
              for(int i=0; i<adminReservas.size(); i++)
                  {
                   out.println("<tr>");
                      out.println("<td>"+adminReservas.get(i).getNumeroReserva()+"</td>");
                    //out.println("<td><input type='text' value='"+adminReservas.get(i).getOrigenReserva()+"' class='input-sm form-control' size='5' readonly='readonly'></td>");
                      out.println("<td>"+adminReservas.get(i).getOrigenReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getDestinoReserva()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getOrigenVueloReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getTotalPiezasReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getTotalKilosReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getTotalVolumenReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getEstadoReserva()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getNotaReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getFechaCreacionReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getFechaEmbarqueReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getTipoReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getPrioridadReserva()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getTipoTarifaReserva()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getTarifaReserva()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getTipoMonedaReserva()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getRutCliente()+"</td>");
                      out.println("<td>"+adminReservas.get(i).getNombreCliente()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getTelefonoCliente()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getDireccionCliente()+"</td>");
                      out.println("<td style='display:none'>"+adminReservas.get(i).getEmailCliente()+"</td>");
                      out.println("<td>"
                                + "<button type='button'  class='btn btn-primary glyphicon glyphicon-eye-open btn-xs' data-toggle='modal' data-target='#exampleModal'></button>"
                                + " <button type='button'  class='btn btn-danger glyphicon glyphicon-trash btn-xs' data-toggle='modal' data-target='#modalAdministrarReservaEliminarReserva'></button>"
                              + " <button type='button'  class='btn btn-success glyphicon glyphicon-eye-open btn-xs' onclick=location.href='detalleReserva.jsp'></button>"
                              + "</td>");
                                            //out.println("<td><a type='button'  href='modificarReservas.jsp?id='"+adminReservas.get(i).getNumeroReserva()+"' '  class='btn btn-primary glyphicon glyphicon-eye-open' style='font-size:19px'></button></td>");
                                            //out.println("<td><input type='checkbox' name='check_guia' class='form-control checkbox' value='"+adminReservas.get(i).getNumeroReserva()+"'></td>");
                                        }   
         }
     catch(java.lang.NullPointerException ex)
         {
                     ex.getMessage();
                   //out.print("<input type='text' value='"+ex.getMessage()+"'>");
                     out.print("</tr>");
         }

 %>
        </tbody>   
        </table>

</div>

Aca el codigo jquery para exportar

<script type="text/javascript">
    function Export() {
        html2canvas(document.getElementById('resultado'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Table.pdf");
            }
        });
    }
</script>

Acá el botón que ejecuta la función.

<input type="button" id="btnExport" value="Export" onclick="Export()" />

Acá el pdf de la tabla exportada.

introducir la descripción de la imagen aquí

espero su ayuda gracias.

2
  • ¿Y si antes de html2canvas haces que esa columna tenga un display none y luego de descargar el archivo regresas a mostrarlo? ¿Funcionará?
    – fredyfx
    el 23 feb. 2019 a las 5:12
  • y como quedaría un display none dentro del código de jquery? la verdad tengo poco conocimiento en javascript. el 23 feb. 2019 a las 5:31

1 respuesta 1

1

4 cosas:

1) Si te hace falta aprender JavaScript y jQuery, ve directo a la documentación oficial, serán tus nuevas biblias:

2) Practica, intenta, haz lo posible para entender los errores, sus motivos e intenta nuevamente resolver el caso.

3) Decir que uno tiene poco conocimiento en algo jamás debe ser limitante, hay que buscar información, leer, practicar, seguir leyendo y seguir practicando, en nuestra carrera de programadores la principal manera de aprender es creyendo que es posible y acto seguido intentando N maneras sin perder el norte.

4) Aquí tienes código, espero te sea de utilidad:

Reemplaza:

<th class="btn-info">Acción</th>

Por:

<th class="btn-info desaparecerTemporalmente">Acción</th>

Y también reemplaza:

out.println("<td>"
                                + "<button type='button'  class='btn btn-primary glyphicon glyphicon-eye-open btn-xs' data-toggle='modal' data-target='#exampleModal'></button>"
                                + " <button type='button'  class='btn btn-danger glyphicon glyphicon-trash btn-xs' data-toggle='modal' data-target='#modalAdministrarReservaEliminarReserva'></button>"
                              + " <button type='button'  class='btn btn-success glyphicon glyphicon-eye-open btn-xs' onclick=location.href='detalleReserva.jsp'></button>"
                              + "</td>");

Por:

 out.println("<td class='desaparecerTemporalmente'>"
                                + "<button type='button'  class='btn btn-primary glyphicon glyphicon-eye-open btn-xs' data-toggle='modal' data-target='#exampleModal'></button>"
                                + " <button type='button'  class='btn btn-danger glyphicon glyphicon-trash btn-xs' data-toggle='modal' data-target='#modalAdministrarReservaEliminarReserva'></button>"
                              + " <button type='button'  class='btn btn-success glyphicon glyphicon-eye-open btn-xs' onclick=location.href='detalleReserva.jsp'></button>"
                              + "</td>");

Tu función de exportación se actualiza con un par de líneas extra:

<script type="text/javascript">
    function Export() {
        //Seleccionamos TODOS los elementos que tienen esta clase "desaparecerTemporalmente y le damos un display none"
        $(".desaparecerTemporalmente").css("display","none");
        html2canvas(document.getElementById('resultado'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Table.pdf");
            }
        });
        //Ahora que ya fue exportado, regresamos los botones a su sitio:
        $(".desaparecerTemporalmente").css("display","");
    }
</script>
4
  • a entiendo a "desaparecerTemporalmente" lo llamas como clase desde las etiquestas th, le dices que desaparezca con la función display-none de css y lo luego la haces aparecer con la función display. a ok lo voy a probar gracias. el 25 feb. 2019 a las 3:04
  • Hola el código no me funciono, gracias seguiré intentando. el 1 mar. 2019 a las 19:28
  • me sorprende que no haya funcionado, en tu código tienes <th class="btn-info" style="display:none">Telefono Cliente</th><th class="btn-info" style="display:none">Direccion Cliente</th><th class="btn-info" style="display:none">Email Cliente</th>y no es mostrado al momento de generar dicho documento
    – fredyfx
    el 1 mar. 2019 a las 20:12
  • por cierto @SimónPereiraVigouroux actualicé la respuesta agregando comillas simples en vez de dobles en esta parte: out.println("<td class='desaparecerTemporalmente'>" . Debería funcionar el código, ¿qué comportamiento tiene?
    – fredyfx
    el 1 mar. 2019 a las 20:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.