1

Utilizei jQuery e jsPDF para gerar PDF do conteúdo de uma DIV, o código criado:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="geraPDF">
   [conteudo1]
   [conteudo2]
   [conteudo3]
</div>

<button class="btn btn-danger" id="btnPDF">Gerar PDF</button>

<script type='text/javascript'>
$(document).ready(function(){
    $('#btnPDF').click(function() {
        var doc = new jsPDF('landscape');
        doc.addHTML($('#geraPDF'), function() {
        doc.save("relatorio_pesquisa.pdf");
        });
    });
});
</script>

Porém o PDF gerado exibe somente parte do conteúdo, apenas [conteudo1], [conteudo2]. O [conteudo3] não está sendo exportado.

Creio que pelo conteúdo ser extenso, está gerando somente uma página e não sei configurar os parâmetros de jsPDF para dar continuidade no número de páginas, ou página contínua, já li o conteúdo do site oficial porém é carente de informações.

1 Resposta 1

6

A um tempo atrás eu respondi essa pergunta Erro - jsPDF Geração de PDF, hoje ela esta com outro título, o código irá funcionar para você também.

Recomendo que leia a resposta que dei na pergunta citada.

$(document).ready(function(){
    $('#btnPDF').click(function() {
      savePDF(document.querySelector('#geraPDF'));
    });
});
  
function savePDF(codigoHTML) {
  var doc = new jsPDF('portrait', 'pt', 'a4'),
      data = new Date();
  margins = {
    top: 40,
    bottom: 60,
    left: 40,
    width: 1000
  };
  doc.fromHTML(codigoHTML,
               margins.left, // x coord
               margins.top, { pagesplit: true },
               function(dispose){
    doc.save("Relatorio - "+data.getDate()+"/"+data.getMonth()+"/"+data.getFullYear()+".pdf");
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="geraPDF">
   [conteudo1]
   [conteudo2]
   [conteudo3]
</div>

<button class="btn btn-danger" id="btnPDF">Gerar PDF</button>

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 .