boa noite
Estou desenvolvendo um projeto de TCC, que busca informações em um BD apresenta na tela em forma de um relatorio e depois deve ser possivel imprimir e gerar um arquivo em pdf desse relatorio.
estou usando a biblioteca html2pdf para a função do botao, o script ficou da seguinte forma
<script>
document.getElementById("print-btn").addEventListener("click", function() {
const opt = { margin: [1, 1, 1, 1],
filename: 'relatorio.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 1 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } };
html2pdf().set(opt).from(document.getElementById('report-element')).save();
});
</script>
o conteudo da pagina que quero gerar o pdf esta conforme a seguir
<div id="report-element">
<section class="w3-row w3-section w3-center" >
<div class="w3-col" style=" width: 60%; margin: 4%;">
<img src="../img/logo-escola.png" >
</div>
<div class="w3-col" style="width: 25%; margin-left: 2%;">
<img src="../img/icone.png">
</div>
</section>
<section class="w3-row w3-section">
<header class="w3-container w3-padding-large w3-center " style="width: 95%; margin:auto">
<br>
<h1 class="w3-text-white w3-panel w3-blue w3-round-large">Relatório de Atividade: <?php echo $_POST['nome']; ?> </h1>
</header>
<div class="w3-col" style=" width: 45%; margin-left: 4%;">
<section class="w3-content w3-text-grey" id="dPessoais">
<h2 class="w3-text-blue" style="margin-left: 15%;">Dados Pessoais</h2>
<form action="" method="post" class="w3-row w3-light-grey w3-text-blue">
<input type="hidden" class="w3-input w3-border w3-round-large" name="idPessoa" value="<?php echo $_POST['idPessoa'];?>">
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-user"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtNome" value="<?php echo $_POST['nome'];?>" disabled>
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-drivers-license"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtCPF" value="<?php echo $_POST['cpf'];?>" disabled>
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-mortar-board"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtra" value="<?php echo $_POST['ra'];?>" disabled>
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-envelope"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtEmail" value="<?php echo $_POST['email'];?>" disabled>
</div>
</div>
</form>
</section>
</div>
<div class="w3-col" style="width: 45%; margin-left: 2%;">
<section class="w3-content w3-text-grey" id="dPessoais">
<h2 class="w3-text-blue" style="margin-left: 15%;">Dados Responsável</h2>
<form action="" method="post" class="w3-row w3-light-grey w3-text-blue">
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-user"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtNome" value="<?php echo $nomePai;?>" disabled>
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-drivers-license"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtCPF" value="<?php echo $cpfPai;?>" disabled>
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width: 11%;">
<i class="w3-xxlarge fa fa-envelope"></i>
</div>
<div class="w3-rest">
<input type="text" class="w3-input w3-border w3-round-large w3-blue w3-text-white" name="txtEmail" value="<?php echo $emailPai;?>" disabled>
</div>
</div>
</form>
</section>
</div>
</section>
<section class="w3-row w3-section">
<header class="w3-container w3-padding-large w3-center " style="width: 97%; margin:auto">
<br>
<h1 class="w3-text-white w3-panel w3-blue w3-round-large">Atividade: <?php echo $idnomeAtividade; ?> </h1>
</header>
<div class="main-container">
<div class="consulta-tabela">
<table>
<thead>
<tr>
<th>Data</th>
<th>Atividade</th>
<th>Pontos</th></th>
<th>Erros</th>
<th>Acertos</th>
<th>Valor sortedado</th>
<th>Duração</th>
</tr>
</thead>
<?php
echo '<tr class="w3-center">';
echo '<td>'.$data.'</td>';
echo '<td>'.$idnomeAtividade.'</td>';
echo '<td>'.$pontos.'</td>';
echo '<td>'.$erros.'</td>';
echo '<td>'.$acertos.'</td>';
echo '<td>'.$valor_sorteado.'</td>';
echo '<td>'.$tempo.'</td>';
echo '</tr>';
?>
</table>
</div>
</div>
</section>
</div>
e os links para as bibliotecas esta da seguinte forma
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js" integrity="sha512-2/YdOMV+YNpanLCF5MdQwaoFRVbTmrJ4u4EpqS/USXAQNUDgI5uwYi6J98WVtJKcfe1AbgerygzDFToxAlOGEQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
e o botao fiz um apenas par teste sem formatação nenhuma
<button id="print-btn">Download PDF</button>
o que esta ocorrendo é que quando clico no botao é gerado um arquivo pdf, porem quando abro o arquivo, apenas a primeira e a segunda section estoa incluidas, a terceira que possui a tabela nao é incluida no pdf
é a primeira vez que tento cria esse botao e meus conhecimentos sao extremamente basicos, alguem por gentilez poderia analizar onde estou errando ou se falta alguma coisa.
desde ja agradeço pela atenção