Estou a seguir esta resposta exemplo que estou a seguir
código:
(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() {
$('#employee_detail').createPdf({
'fileName' : 'testePDF'
});
}
Mas quando faço para gerar o pdf recebo este erro:
Uncaught TypeError: $(...).createPdf is not a function at createPDF (eval at (jquery.js?ver=1.12.4-wp:2), :55:27) at HTMLButtonElement.onclick
HTML do modal e como tenho o inicio da página::
<?php
/*
Template Name: novoutente1
*/
session_start();
get_header1();
?>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="container"></div>
<div class="modal-body" id="employee_detail">
</div>
</div>
</div>
</div>
SCRIPT para ver os dados no modal:
$(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');
}
});
}
});
Depois na página verutente1
, tenho o seguinte código:
<?php
/*
Template Name: verutente1
*/
require("conexao.php");
get_header1();
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.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/canvas2image@1.0.5/canvas2image.min.js"></script>
</head>
<script language="javascript">
(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() {
$('#renderPDF').createPdf({
'fileName' : 'testePDF'
});
}
</script>
<body>
<button type="button" class="btn btn-success" onclick="createPdf();">pdf</button>
<div id="renderPDF" class="table-responsive">
<?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">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
<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;
}
?>
</div>
</body>
</html>
Imagem com o erro:
createPdf is not a function at createPDF
. precisa deixar o nome da função igual, isso vale para maiúsculas e minúsculas – riki481 27/05 às 13:37