2

Tenho o seguinte código na página onde consulto os dados com o modal

(function($){
    $.fn.createPdf = function(parametros) {
        
        var config = {              
            'fileName':'html-to-pdf'
        };
        
        if (parametros){
            $.extend(config, parametros);
        }                            

        var quotes = document.getElementById($(this).attr('id'));
        
        html2canvas(quotes, {
            onrendered: function(canvas) {
                var pdf = new jsPDF('p', 'pt', 'letter');

                for (var i = 0; i <= quotes.clientHeight/980; i++) {
                    var srcImg  = canvas;
                    var sX      = 0;
                    var sY      = 980*i;
                    var sWidth  = 900;
                    var sHeight = 980;
                    var dX      = 0;
                    var dY      = 0;
                    var dWidth  = 900;
                    var dHeight = 980;

                    window.onePageCanvas = document.createElement("canvas");
                    onePageCanvas.setAttribute('width', 900);
                    onePageCanvas.setAttribute('height', 980);
                    var ctx = onePageCanvas.getContext('2d');
                    ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                    var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
                    var width         = onePageCanvas.width;
                    var height        = onePageCanvas.clientHeight;

                    if (i > 0) {
                        pdf.addPage(612, 791);
                    }

                    pdf.setPage(i+1);
                    pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
                }

                pdf.save(config.fileName);
            }
        });
    };
})(jQuery);
 
function createPDF(teste) {
    $('#employee_detail').createPdf({
        'fileName' : 'testePDF'
    });
}




$(document).on('click', '.view_data', function(){  
           var employee_id = $(this).attr("Id");  
           if(employee_id != '')  
           {  
                $.ajax({  
                     url:"./verutente1",  
                     method:"POST",  
                     data:{employee_id:employee_id},  
                     success:function(data){  
					 
                          $('#employee_detail').html(data);  
                          $('#dataModal').modal('show');  
                     }  
                });  
           }            
      });
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.min.js"></script>
</head>

<div id="dataModal" class="modal fade"> 
<div class="modal-dialog">  
<div class="modal-content">
<div class="container"></div>
<div class="modal-header">  
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
</div>
<button type="button" class="btn btn-success" onclick="createPDF();">pdf</button>
<div class="modal-body" id="employee_detail"> 
</div>
</div>
</div>  
</div>  

Depois na página verutente1 tenho da seguinte forma:

<?php
date_default_timezone_set('Europe/Lisbon');
if(isset($_POST["employee_id"]))  
 { 

$output = '';  

$query = "SELECT A.Id, codigo, A.nome, data, admissao, B.Discricao As Dependencia, quarto, civil, profissao, D.Discricao AS Estado, localidade, problemas, representante, C.Discricao AS Parentesco, 
telefone, localidade1, diabetica, alimentacao, apoio, restricoes, fraldas, familia, tipofraldas, Levante, Deitar, posicionamento, oculos, dentaria, queda, tecnicas, qual, grau, outras, E.nome AS enfermeiro
FROM raddb.Utente AS A LEFT OUTER JOIN raddb.Dependencia AS B ON B.Id = A.dependencia LEFT OUTER JOIN raddb.Parentesco AS C ON C.Id = A.parentesco 
LEFT OUTER JOIN raddb.EstadoUtilizador AS D ON D.Id = A.ativo LEFT OUTER JOIN raddb.usuarios AS E ON E.id = A.enfermeiro WHERE A.Id = '".$_POST["employee_id"]."'"; 

      $result = mysqli_query($conn, $query);  

      $output;

      while($row = mysqli_fetch_array($result))  
      {  

           $output .= '


                        <div class="modal-header">  
                        <h4 class="modal-title">Plano Individual de Cuidados</h4>
                        </div>
                        <div class="modal-body">  
                        <div class="table-responsive"> 
                        <form id="insert_form">
                        <div class="form-group input-group">
                         <span class="input-group-addon">
                         <span class="fa fa-file-code"> Código</span>
                         </span>
                         <input type="text" id="codigo1" name="codigo" value="'.$row["codigo"].'" class="form-control" readonly="true"/>
                         </div>
                        <div class="form-group input-group">
                         <span class="input-group-addon">
                         <span class="fa fa-user"> Nome</span>
                         </span>
                         <input type="text" id="nome1" name="nome" value="'.$row["nome"].'" class="form-control" readonly="true"/>
                         </div>
             </form>  
                </div>
                </div>  
           ';  
      }

      $output;
      echo $output;  
 }  

Quando faço gerar o pdf, gera três página, mas a segunda e terceira fica em branco, como mostro no pdf gerado

Mas se no <head> retirar esta livraria:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

já gera a segunda página como mostro no pdf gerado, mas fica sem formatação.

O problema é que não está a tirar o screenshot ao modal completo, só tira ao que aparece no ecrã, o que fica fora do ecrã não mostra no pdf gerado, mas cria no pdf o número de folhas corretamente. Se tentar gerar o pdf sem ser no modal, funciona corretamente. Bibliotecas no get_header:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="<?php echo of_get_option( 'nav_bg_color' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.min.js"></script>

<?php wp_head(); ?>

</head>

Na página novoutente1:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> 
<?php
/*
Template Name: novoutente1
 */
session_start();
get_header1();

?>
1
  • @RDyego Esta pergunta está relacionada com a pergunta link, será que pode ver esta depois de ter identificado o problema?
    – Bruno
    28/05/2019 às 15:26

1 Resposta 1

1
+50

Isso se dá porque o componente considera a altura do body para gerar o PDF. Ao abrir a modal, a altura do body da página fica limitada ao que se vê na tela.

O que você precisa fazer é setar a altura do body na mesma altura da div.modal-dialog da modal, que é a div onde se encontra o conteúdo da modal. Fazendo com que o body tenha a mesma altura dessa div, o componente irá capturar todo o seu conteúdo.

Para isso use o evento shown.bs.modal para alterar a altura do body na mesma altura da div da modal, e o evento hide.bs.modal para voltar o height do body ao normal:

$('#dataModal').on('shown.bs.modal', function(){
   $("body").css("height", $('.modal-dialog', this).outerHeight()+"px");
}).on('hide.bs.modal', function(){
   $("body").css("height","auto");
});

Seu código deverá ficar assim:

$('#dataModal').on('shown.bs.modal', function(){
   $("body").css("height", $('.modal-dialog', this).outerHeight()+"px");
}).on('hide.bs.modal', function(){
   $("body").css("height","auto");
});

(function($){
    $.fn.createPdf = function(parametros) {

        var config = {              
            'fileName':'html-to-pdf'
        };

        if (parametros){
            $.extend(config, parametros);
        }                            

        var quotes = document.getElementById($(this).attr('id'));

        html2canvas(quotes, {
            onrendered: function(canvas) {
                var pdf = new jsPDF('p', 'pt', 'letter');
                for (var i = 0; i <= quotes.clientHeight/980; i++) {
                    var srcImg  = canvas;
                    var sX      = 0;
                    var sY      = 980*i;
                    var sWidth  = 900;
                    var sHeight = 980;
                    var dX      = 0;
                    var dY      = 0;
                    var dWidth  = 900;
                    var dHeight = 980;

                    window.onePageCanvas = document.createElement("canvas");
                    onePageCanvas.setAttribute('width', 900);
                    onePageCanvas.setAttribute('height', 980);
                    var ctx = onePageCanvas.getContext('2d');
                    ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                    var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
                    var width         = onePageCanvas.width;
                    var height        = onePageCanvas.clientHeight;

                    if (i > 0) {
                        pdf.addPage(612, 791);
                    }

                    pdf.setPage(i+1);
                    pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
                }

                pdf.save(config.fileName);
            }
        });
    };
})(jQuery);

function createPDF(teste) {
    $('#employee_detail').createPdf({
        'fileName' : 'testePDF'
    });
}

$(document).on('click', '.view_data', function(){  
     var employee_id = $(this).attr("Id");  
     if(employee_id != '')  
     {  
          $.ajax({  
               url:"./verutente1",  
               method:"POST",  
               data:{employee_id:employee_id},  
               success:function(data){  
                    $('#employee_detail').html(data);  
                    $('#dataModal').modal('show');  
               }  
          });  
     }            
});
10
  • Amigo continuo com o mesmo problema, ou só gera no pdf a primeira folha e as outras duas em branco ou retorna o erro que já refiro acima na pergunta
    – Bruno
    3/06/2019 às 22:18
  • sim funciona, mas eu acho que o problema também está nas bibliotecas. Eu preciso do jquery para gerar o pdf, mas se colocar o jquery na página onde vou executar a função recebo a mensagem que createPdf não é função. Mas se retirar o get_header do tema, já posso colocar o jquery e já funciona. Sei que o problema é esse, mas não sei explicar melhor, nem sei a razão de acontecer
    – Bruno
    3/06/2019 às 22:37
  • tem que ver a ordem que vc está carregando as bibliotecas. A do jQuery deve vir antes de todas.
    – Meu ovo
    3/06/2019 às 22:39
  • e é assim que tenho. Vou publicar as bibliotecas e a ordem
    – Bruno
    3/06/2019 às 22:40
  • Pelo que vi está certa a ordem, inclusive na página de teste eu copiei todo o seu código.
    – Meu ovo
    3/06/2019 às 22:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .