4

Acabo de realizar una aplicación para el tema del registro de jornada laboral para mi empresa, en el cual el usuario se loguea y firma con el móvil desde donde este, lo guardo todo en la base de datos y luego lo listo en un datatables, para imprimirlo y tal.

La cosa es que no me deja imprimir las imágenes de las firmas de cada uno de los trabajadores (aparece en blanco).

Versión de navegador:

en el listado si aparecen las firmas pero al darle a imprimir aparece en blanco

Versión impresa:

versión impresa

Este es el informe que imprime el dataTables en el cual no aparecen las firmas <img> de las mismas que tengo guardadas en la base de datos.

Código PHP para generar la página:

<html>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet">
<style>
    @media print {
        table.dataTable thead th{
            font-size: 12px;
            padding: 2px;
        }
        table.dataTable tfoot th{
            margin-top: 10px;
            font-size: 10px;
            padding: 0px;
        }
        table.dataTable.display tbody td {
            padding: 2px;
            font-size: 10px;
            text-align: center;
        }
        table.dataTable.display tbody tr.odd{
            background-color: #ccc;
        }
        table.dataTable.display tbody tr.odd>.sorting_1{
            background-color: #ccc;
        }
        table.dataTable.display tbody tr.odd>.sorting_2{
            background-color: #ccc;
        }
        table.dataTable.display tbody tr.odd>.sorting_3{
            background-color: #ccc;
        }
    }
    .dataTables_filter{
        display: none;
    }
    th { white-space: nowrap; }

    .highlight {
        background-color: black;
        color: white;
    }
</style>
</html>
<?php
    require_once('../Conection.php');
    $conection = Conection::getConection();
    $dia = date("d");
    $seguros = [];
    $query = "SELECT *,t.Nombre as tNombre FROM fichar rt INNER JOIN trabajadores t ON rt.CodTrabajador=t.Codigotrab WHERE Firma IS NOT NULL ORDER BY rt.Fecha DESC ";
    $result = mysqli_query($conection, $query);
    while ($row = mysqli_fetch_assoc($result)) {
        $seguros[] = array(
            "CodTrabajador" => $row['CodTrabajador'],
            "Fecha" => $row['Fecha'],
            "HoraInicio" => $row['HoraInicio'],
            "HoraFin" => $row['HoraFin'],
            "Linea" => $row['Linea'],
            "Turno" => $row['Turno'],
            "tNombre" => $row['tNombre'],
            "Total" => $row['Total'],
            "Firma" => $row['Firma'],
            "DNI" => $row['Dni']
        );
    }
    echo "<h1>INFORME JORNADA TRABAJO</h1>";

    echo "<table id='seguros' class='display' width='100%' style='text-align: center'>
            </div>
                <thead>
                    <tr>
                        <th>TRABAJADOR</th>
                        <th>DNI</th>
                        <th>FECHA</th>
                        <th>LINEA</th>
                        <th>TURNO</th>
                        <th>HORA INICIO</th>
                        <th>HORA FIN</th>
                        <th>HORAS TOTAL</th>
                        <th>FIRMA</th>
                    </tr>
                </thead><tbody>";

if (!empty($seguros)) {
    foreach ($seguros as $i) {  //Iteramos tu objeto
        if ($i['DNI'] != "2222") {

            $tds = ""; //Inicmaos variable tds
            $tds .= "<td>" . $i['tNombre'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $tds .= "<td>" . $i['DNI'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $fecha = date('d-m-Y', strtotime($i['Fecha']));
            $tds .= "<td>" . $fecha . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $tds .= "<td>" . $i['Linea'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $tds .= "<td>" . $i['Turno'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $tds .= "<td>" . $i['HoraInicio'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $tds .= "<td>" . $i['HoraFin'] . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $horainicio=new DateTime(date("H:i",strtotime($i['HoraInicio'])));
            $horafin=new DateTime(date("H:i",strtotime($i['HoraFin'])));
            $total= $horafin->diff($horainicio);
            $total=$total->format('%H:%I');
            $tds .= "<td>" . $total . "</td>"; // Extraemos solo el valor concatenandolo en la variable $tds.
            $ubicacion=$i['Firma'];
            $tds.= "<td><img src='$ubicacion' style='height: 70px'></td>";
            echo "<tr>" . $tds . "</tr>"; // Imprimimos el resultado final
        }
    }
}
?>
</tbody>
<tfoot>
<tr>
    <th id="dia">Dia Informe:</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js"></script>

<script src="../js/tabletrabajo.js"></script>

Y éste es el javascript que inicia el dataTable:

$(document).ready(function() {
    var table = $('#seguros').DataTable({
        "autoWidth": true,
        "displayLength": 50,
        "ordering": false,
        dom: 'Bfrtip',
        buttons: [
            {extend:'print',text: "Imprimir",title: "",footer:true,exportOptions:{columns:[0,1,5,6,7,8]},
                customize: function (win) {
                    $(win.document.body)
                        .css('font-size','8pt')
                        .prepend('<div style="margin-left: 15%">' +
                            '<table border=\'1\' cellspacing=0 style="text-align: center;width: 90%;">' +
                            '<thead>' +
                            '<tr>' +
                            '<th colspan=\'2\'><h3 style="margin-left: 15%"><h2>REGISTRO DIARIO DE JORNADA DE TRABAJO</h2></th>' +
                            '</tr>' +
                            '<tr>' +
                            '<th>EMPRESA</th>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr>' +
                            '<td><strong>Empresa de prueba1</strong></td>' +
                            '<tr>' +
                            '</tr>' +
                            '<tr>' +
                            '<td colspan="2" style="font-size: 8px">En Cumplimiento de la obligación establecida en el Art. 35.5 del Real Decreto Legislativo 2/2015 de 23 de Octubre, por el que se aprueba el texto refundido de la Ley del Estatuto de los Trabajadores</td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>' +
                            '</div>');
                    $(win.document.body).css('font-size','8px')
                }
            },
            {extend:'excel',text: "Exportar Excel",title: "Informe de Seguros",footer:true,exportOptions:{columns:[0,1,5,6,7,8]} },
            {extend:'pdf',text: "Exportar PDF",title: "Informe de Seguros",footer:true,exportOptions:{columns:[0,1,5,6,7,8]}},
            {extend:'copy',text: "Copiar portapapeles",title: "Informe de Seguros",footer:true,exportOptions:{columns:[0,1,2,3,4,5,6]}}
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        }
    });
    // Setup - add a text input to each footer cell
    $('#seguros thead tr').clone(true).appendTo( '#seguros thead' );
    $('#seguros thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        if(title=="FECHA"){
            $(this).html( '<input type="date" placeholder="Buscar '+title+'" />' )
            $( 'input', this ).on( 'change', function () {
                $('#dia').html("Dia Informe: "+$.date(this.value))
                if ( table.column(i).search() !== $.date(this.value) ) {
                    table
                        .column(i)
                        .search($.date(this.value))
                        .draw();
                }
            } );
        }
        else {
            $(this).html( '<input type="text" placeholder="Buscar '+title+'" />' );
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        }
    } );
    $.date = function(dateObject) {
        var d = new Date(dateObject);
        var day = d.getDate();
        var month = d.getMonth() + 1;
        var year = d.getFullYear();
        if (day < 10) {
            day = "0" + day;
        }
        if (month < 10) {
            month = "0" + month;
        }
        var date = day + "-" + month + "-" + year;

        return date;
    };
} );
7
  • 1
    Bienvenido a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida y, de paso, ganar tu primera medalla. También es importante que leas Cómo preguntar y ejemplo mínimo verificable para poder mejorar tus preguntas y que sean bien recibidas por la comunidad, de esta manera favoreces a que los usuarios las respondan y te ayuden
    – Rabegi
    Commented el 5 jun. 2019 a las 8:44
  • ¿A qué te refieres con que no te deja imprimir las firmas? En la imagen las firmas se ven perfectamente. ¿Podrías compartir el código PHP/HTML que usas para generar la tabla? Commented el 5 jun. 2019 a las 10:13
  • @OscarGarcia antes de todo muchas gracias por contestar, si, hay se ven perfectamente porque es un pantallazo del informe, en el cual si se ve perfectamente las firmas que capture anteriormente pero en el print ya no aparecen ahora paso foto del informe en sí, que tengo que tachar dni... y también paso el código
    – KeTeMeTo
    Commented el 5 jun. 2019 a las 10:30
  • Evita enviar pantallazos, y si los envías procura que cada uno sea lo más ajustado posible a lo que quieras mostrar (evita tanto borde blanco sin información). En cuanto muestres cómo generas la tabla y cómo funciona tu botón "Imprimir" te diré qué está fallando. Commented el 5 jun. 2019 a las 10:32
  • @OscarGarcia perfecto ahora lo formateo, perdón pero soy nuevo aquí
    – KeTeMeTo
    Commented el 5 jun. 2019 a las 10:56

1 respuesta 1

4

El problema que estás sufriendo es que, por defecto, el parámetro stripHtml de exportOptions es true:

boolean stripHtml - Indicate if HTML should be stripped from the read data if there is any (true) or not (false). Default - true.

En castellano:

boolean stripHtml - Indica si el código HTML debería ser retirado de los datos leídos (true) o no (false). Por defecto - true (sí).

Por lo que todo HTML que tengas en su interior desaparecerá al ser impreso el documento.

Debes indicar explícitamente que no elimine el contenido HTML de tus celdas para que la imagen no desaparezca:

    buttons: [
        {
            extend: 'print',
            text: "Imprimir",
            title: "",
            footer: true,
            exportOptions: {
                columns: [ 0, 1, 5, 6, 7, 8 ],
                stripHtml: false, /* Aquí indicamos que no se eliminen las imágenes */
            },
            customize: function (win) {
                /* ... */
            }
        },
        {extend:'excel',text: "Exportar Excel",title: "Informe de Seguros",footer:true,exportOptions:{columns:[0,1,5,6,7,8]} },
        {extend:'pdf',text: "Exportar PDF",title: "Informe de Seguros",footer:true,exportOptions:{columns:[0,1,5,6,7,8]}},
        {extend:'copy',text: "Copiar portapapeles",title: "Informe de Seguros",footer:true,exportOptions:{columns:[0,1,2,3,4,5,6]}}
        /* ... */
4
  • 1
    Madre mía, muchísimas gracias, me iba a volver loco ya, te daría mas 1k pero no me deja votar por ser nuevo
    – KeTeMeTo
    Commented el 5 jun. 2019 a las 11:32
  • Me alegra haber sido de ayuda :) Commented el 5 jun. 2019 a las 11:34
  • Si no es mucho molestar, como cambio el hilo a resuelto?
    – KeTeMeTo
    Commented el 5 jun. 2019 a las 11:42
  • Te debería aparecer un símbolo de tick () bajo el número de votos de mi respuesta. Commented el 5 jun. 2019 a las 11:52

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.