Using jsPDF to generate PDF

Asked

Viewed 7,958 times

1

I used jQuery and jsPDF to generate PDF of the content of a DIV, the code created:

<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>

But the PDF displays only part of the content, only [content1], [content2]. [content3] is not being exported.

I believe that because the content is extensive, is generating only one page and I do not know how to configure the parameters of jsPDF to continue the number of pages, or continuous page, I have read the content of the official website but is lacking information.

jquery jspdf

1 answer

6


A while ago I answered that question Error - jsPDF PDF Generation, today she is with another title, the code will work for you too.

I recommend you read the answer I gave in the aforementioned question.

$(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>

Browser other questions tagged jquery jspdf

You are not signed in. Login or sign up in order to post.