4

Trataré de explicarme lo mejor posible. Lo que busco es imprimir una tabla, que es el resultado de una consulta que obtengo con jquery ajax, en un archivo PDF. La consulta se hace a partir de estos datos:

datos

El usuario elige y al dar click en consulta obtengo la consulta con jquery ajax, el codigo es el siguiente:

$.ajax({
    url: 'vistas/modulos/secundaria.php',
    method: 'POST',
    data: parametros,
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,
    success: function(registros){

        var opcion;
        var entrega;
        var costo;
        var auxiliar = 0;

        $.each(registros, function(i, registro){

            if (typeof (registro.primer_aviso) != "undefined") {
                opcion = registro.primer_aviso;
                entrega = registro.entrega_primer;
                costo = registro.costo_primer;
            }
            else{
                opcion = registro.testimonio;
                entrega = registro.entrega_testimonio;
                costo = registro.costo_testimonio;
            }

            auxiliar = parseInt(auxiliar) + parseInt(costo);

            $('#consultaSecundaria').append(
                '<tr>'+
                    '<td>'+registro.municipio+'</td>'+
                    '<td>'+registro.escritura+'</td>'+
                    '<td>'+registro.enajenante+'</td>'+
                    '<td>'+registro.adquiriente+'</td>'+
                    '<td>'+opcion+'</td>'+
                    '<td>'+entrega+'</td>'+
                    '<td>'+costo+'</td>'+
                '</tr>'
            );
        });

    }
});

Con este codigo obtengo un resultado asi, hasta aqui no tengo ningun problema:

consulta

Ahora lo que necesito, es que cuando el usuario de click en el boton CREAR PDF, se deberia abrir una nueva pestaña con la tabla resultante de la consulta en un archivo pdf, de hecho logre imprimirlo en un archivo pdf, mi problema es que solo puedo mandar a imprimirlo sin estilos. Asi:

sinestilos

Lo que hice fue guardar todo el contenido de la tabla en una variable, asi:

$('#pdf').on('click', function() {

    var auxiliar = $('#consultaSecundaria').html();
    var contenido = "<table border='1'>"+auxiliar+"</table>";
    //contenidoPdf(contenido);
    window.open ("vistas/modulos/pdf.php?contenido="+contenido, '_blank');

});

Y luego en el archivo php esto:

<?php 

require '../../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;

$imprimir = $_GET['contenido'];

$objeto = new Html2Pdf();
$objeto -> writeHTML($imprimir);
$objeto -> output('archivo.pdf');

?>

Lo que se de HTML2PDF lo aprendi de este video: https://www.youtube.com/watch?v=IPTVvOl1ia0&t=990s

Por lo que veo, para poder darle estilo al archivo pdf necesitas un archivo nuevo en html, el cual mediante las funciones de php ob_start() y ob_get_clean() lo guardas en una variable con todos sus estilos css y entonces si, lo mandas a imprimir. Mi problema es que la tabla que yo busco imprimir en pdf la obtengo de una consulta jquery ajax, y no la puedo obtener de la misma forma en que lo hacen en los tutoriales. No se como conjuntar estas 2 situaciones.

No se me ocurre la forma de resolverlo. ¿Alguien?

3 respuestas 3

0

lo que quiere hacer es cargar esa tabla en un html con sus estilos. Para no modificar mucho lo que tienes hecho. Te devuevo un json que es el que dibujas , puedes hacer otra llamada ajax con ese json que te devuelva la tabla maquetaa con estilos y luego imprimirla. Yo lo he usado varias veces y funciona.

url: 'vistas/modulos/secundaria.php',
method: 'POST',
data: parametros,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
success: function(registros){
 //aqui la llamada  
    $.ajax({
        async: true,   // this will solve the problem
        type: "POST",
        url: DONDE MAQUETAS EL JSON
        contentType: "html",
        success:function (html) {
            AQUI IMPRIMES EL html
        }

    });
3
  • Te agradezco la respuesta, pero no te he comprendido. ¿Podrias intentar explicarmelo de nuevo? Commented el 8 feb. 2018 a las 16:41
  • conseguiste resolver el problema @OscarDíaz??
    – arglez35
    Commented el 14 ago. 2018 a las 23:10
  • @arglez35 Nunca lo pude resolver :/ Commented el 30 sept. 2018 a las 1:03
0

puedes hacer esto bro, es un ejemplo al consumir una api

_url = "https/ecample/example"; // esto es tu url

var _html ="";

  $.ajax({
        url:_url,
        method: "GET",
        headers : {
            'X-API-KEY':'ANGLOKEY'
        },
        dataSrc : $('#example').find('tbody').empty().append(_html),
        success : function(response){
        if (response.status=="success") {

            var _html ="";
            for (var i = 0; i < response.data.length; i++) {
                _html +="<tr>";

                        _html +="<td><img src='"+response.data[i].urlLogotipo+"' alt='Elemento de Descarga' width='50px' height='50px'></td>";
                            _html +="<td>"+response.data[i].nombrePreparatoria+"</td>";
                                _html +="<td>"+response.data[i].statusPreparatoria+"</td>";
                            _html +="<td>"+response.data[i].fundacion+"</td>";
                            _html +="<td>"+response.data[i].nombreCampus+"</td>";
                            _html +="<td>"+response.data[i].tipoCampus+"</td>";
                            _html +="<td>"+response.data[i].alojamientoCampus+"</td>";
                       _html +="<td> <a href='<?=base_url('Cita/add/')?>"+response.data[i].id+"' id='btnE"+response.data[i].id+"' class='edit-control btn btn-primary btn-xs'  data-toggle='tooltip' title='Edit'> <i class='fa fa-pencil'></i></a>   <button id='"+response.data[i].id+"' class='delete-control btn btn-danger btn-xs'  title='Delete'><i class='fa fa-trash-o'></i></button></td>";
                            _html +="</tr>";
            }

            $('#example').find('tbody').empty().append(_html); //para localizar
            $('#example').DataTable({
             dom: 'Bfrtip',
             buttons: [
             'copy', 'csv', 'excel', 'pdf', 'print'
             ]
            });

        }else{
            alert(response.message);
        }

        },
        error : function(err){
                response= JSON.stringify(err.responseText);
                $(document).find('#responseText').html(
                    '<div class="alert alert-success" role="alert">'
                    +response+
                    '</div>'
                );
                setTimeout(function(){
                        $(document).find('#responseText').html('');
                }, 3000);

        }
    });
1
  • 2
    Hola @israel bienvenidx, parece que a simple vista tu pregunta no responde el problema ya que no es lo que el usuario quiere, pero tampoco posee un contexto digerible, recuerda que responder con código es siempre lo mejor pero el desarrollo de la respuesta es la parte primordial, te invito a leer el recorrido y como responder, no te desanimes y edita tu pregunta para que sea bien recibida, de lo contrario podría afectar tu reputación, un saludo. Commented el 24 abr. 2020 a las 18:01
0

Tu variable $contenido no tiene completo el html. Solo tienes que completarlo para poder añadir el css:

var contenido="<html>
<head>
<style type='text/css'>
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>
<body><table border='1'>"+auxiliar+"</table>
</body>
</html>";

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.