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">×</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();
?>