.html() page_break example not working

[swildig]

The "page_break.html" example all displays on a single page with none of the expected breaks. I also tried "showcase_supported_html.html" and that exhibits similar issues.

I have tried using older versions of html2canvas and jsPDF but I can't find a combination that works.

Does anybody have a way to get these working?

Thanks,

[ericfurspan]

+1

I am unable to arrive at clean page breaking myself. Using html2canvas and jsPdf. Even tried the wrapper i've seen referenced a bunch, html2pdf.js, but that had issues of its own related to fitting the image proportionally... so i reverted back to the core libraries and dealing with no page break for now until I can put together a fix

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[benelliott]

bump

[HanXHX]

I confirm the issue

[javitospfv]

I too confirm the issue

[Karthik-PlantSense]

i too having this issue

[krupapanchal]

I'm also facing the same issue. any update for this?

[pagegwood]

bump... this is a big issue.

[rajorpratyush]

I have this issue

[JetJacobs]

Still facing this, anyone found a workaround?

[doublethink13]

I also have this issue :disappointed:

[AnthonyPhan]

I'm also facing this issue

[jmalStorm]

Same issue 😢

[blerrgh]

Same issue here in 2023. Any way to add explicit page breaks in jsPdf.html()?

[YuFengDing]

I confirm the issue

[cmorillo]

Hi everyone,

I have done this funtion for A4 that calculates the margin to be added, seems to be working but probably not perfect:

In order to add a new page, just add

<div class='new-page'></div> 

or just the class in an element

<script>


       window.jsPDF = window.jspdf.jsPDF;

       function getOffset(el) {
           const rect = el.getBoundingClientRect();
           return {
               left: rect.left + window.scrollX,
               top: rect.top + window.scrollY
           };
       }

       var htmlElement = document.getElementById("html");
       var htmlElementY = getOffset(htmlElement).top;
       //Page height - margin bottom
       var pageHeight = 805.75 - 40;
       var els = document.getElementsByClassName("new-page");




       Array.prototype.forEach.call(els, function (el) {
           var elementY = getOffset(el).top;
           var addPoints = pageHeight - ((elementY - htmlElementY) % pageHeight);
           console.log(elementY, htmlElementY, addPoints);
           el.style.marginTop = addPoints + "px";
       });


       var pdf = new jsPDF('p', 'pt', 'a4');


       pdf.html(document.getElementById('html'), {
           margin: [40, 60, 40, 60],
           callback: function (pdf) {
               addFooters(pdf)
               pdf.save('web.pdf');
           }
       });

       const addFooters = doc => {
           const pageCount = doc.internal.getNumberOfPages()
           console.log(doc.internal.pageSize.width, doc.internal.pageSize.height);
           doc.setFontSize(8)
           for (var i = 1; i <= pageCount; i++) {
               doc.setPage(i)
               doc.text('Página ' + String(i) + ' de ' + String(pageCount), doc.internal.pageSize.width / 2, 820, {
                   align: 'center'
               })
           }
       }

   </script>