Using jsPDF to generate PDF

Question

Using jsPDF to generate PDF

Navigation

#1 by (4 votes)

1

I used jQuery and jsPDF to generate PDF of the contents of a DIV p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><scriptsrc="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><divid="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>

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

I believe that because the content is extensive, it is generating only one page and I do not know how to configure the parameters of jsPDF to give continuity in the number of pages, or page continuous, I have already read the content of the official website is devoid of information.

jquery jspdf

asked by anonymous 21.11.2017 / 16:38

1 answer

Consultation with combined criteria List file excluding first letter

score 4 · Accepted Answer

A while ago I answered that question Error - jsPDF PDF Generation , now it has another title, the code will work for you too.

I recommend you read the answer I gave in the above 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><scriptsrc="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><divid="geraPDF">
   [conteudo1]
   [conteudo2]
   [conteudo3]
</div>

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