html long text content overflow to the new page using jsPDF

Question

with reference to this url:jsPDF html method with addPage to split pages in generated PDF

The issue I am facing is when the contents of the p tags overflow to a new page in PDF cutting off parts of text as can be seen here:

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.html($("#sec1")[0], { margin: 30 }).then(() => {
    var noOfPages = pdf.internal.getNumberOfPages();
    var y = (pdf.internal.pageSize.height - 60) * noOfPages; // sub margins
    pdf.addPage();
    return pdf.html($("#sec2")[0], { y: y, margin: 30 });
}).then(() => {
    var noOfPages = pdf.internal.getNumberOfPages();
    var y = (pdf.internal.pageSize.height - 60) * noOfPages; 
    pdf.addPage();
    return pdf.html($("#sec3")[0], { y: y, margin: 30 });
}).then(() => {
    var data = pdf.output("datauristring");
    pdf.save(data);
});

this code does not work as expected. still i can see the text overflow to the new page.

Answer 1

jspdf html method has auto paging mechanism which is set to slice or true. For your case to avoid text cutoff best it to set autoPaging: 'text', which tries not to cut text in half across page breaks

An example code:

doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   },
   x: 10,
   y: 10,
   autoPaging: 'text',
});