html2pdf.js: 0.9.1: I can't make the page-break options work at all

Have you tried anything like:

html2pdf().set({
    pagebreak: {avoid: 'tr'}
});

That’s specifically telling it to avoid breaking across a table row - the “modes” are only one small part of what the pagebreak functionality can do. That said, tables are tricky and don’t behave like most other elements, they may still need some work.

Hi @AbelVM @foria, things move a bit slowly here, you’ll have to bear with me. As I see it there’s three possible issues here:

1. Page breaks aren’t working for you at all. Is this the case? Try out this test Fiddle, which showcases all the different kinds of page-breaks you can use.

2. Pages break in the middle of text when you have elements longer than one page. This is a more complicated issue that there’s no fix for currently, but the vast majority of page-break needs should have been resolved with v0.9.1.

3. Something else? If it’s not one of the two above, give me an example so I can reproduce it and see what’s going on.

Thanks!

UPDATED Solution from my last response:

I solved on my projects using this options:

<vue3-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="false"
        :preview-modal="false"
        filename="memoria-del-projecte.pdf"
        :pdf-quality="1"
        :manual-pagination="true"
        pdf-format="a4"
        pdf-orientation="portrait"
        pdf-content-width="800px"
        ref="html2Pdf"
        @beforeDownload="beforeDownload($event)"
      >

---

.set({
          ...options,
              margin: [0,15, 15, 15],
             filename: 'pdfFileName.pdf',
             image:        { type: 'jpeg', quality: 0.98 },
             html2canvas:  { scale: 1, letterRendering: true },
             jsPDF:        { unit: 'pt', format: 'letter', orientation: 'portrait' },
            pagebreak: { after: 'section', mode: ['avoid-all', 'css', 'legacy'] }
        })

I had a 60 pages PDF, so i divide my PDF into sections and break after each section.

<section class="pdf-item">
    <div class="myStyle keeptogether">
       ....your content
     </div>
</section>

<section class="pdf-item">
    <div class="myStyle keeptogether">
       ....your content
     </div>
</section>

The other problem i had was those super long text’s I used this class for those super text’s, in order to break if text was too long.

.keeptogether {page-break-inside:avoid; break-inside: avoid;}

.myStyle {

// for me had to do some teeeks on wordbreaking
   overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: keep-all;
    word-break: keep-all;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
     }

Just to comment here, because my experience might help. I also had issues with the page breaks. My document was about 15 pages long. I discovered the pixel limitation on the canvas size was the main issue. It worked much better when I chained sending individual sections/divs to the canvas, creating a new page in the PDF, and saving the whole PDF at the end.

Hi @eKoopmans , I’ve played with that example before, it works flawless but looks like it’s not applicable on my end.

I’m working with dynamically generated tables (with head and body), and any available combination of page break related options leads to undesirable results. My first case has 4 DIVs (1st with some charts, the rest with tables):

• avoid-all: the page brakes when it comes to its end, just ignoring the mode
• CSS: same as above
• legacy, forcing a break before the DIVs with tables within, I get:
  • 1st page: the charts and blank space
  • 2nd page: blank and half table at the end, broke right in the middle
  • 3rd and 4th: half table at the top, blank page, half table at the bottom
  • 5th: half table at the top, blank page…
• Adding breakable DIVs betweeen unbreakable DIVs, to avoid the cut-in-half behavior: no effect at all
• …

I can’t recall now all the tests I’ve performed, but I can assure you I spent a lot of time testing all the different combinations I could imagine with no result but hundreds of failed PDFs in my download folder 😝

@eKoopmans, Can it work in flex div as well, Currently i am facing issue with line split into two pages.

Is there a way we can fix this, i’m using v0.9.1?

@eKoopmans thank you so much for providing this awesome library.

I think that the running count for the height of pages for a PDF exporting tables is off by a couple of pixels. pagebreak: {avoid: 'tr'} runs really great until around page 13 - 15 for us. At that point the top line gets cut off, and with each subsequent page it’s cut off a tiny bit more.

To fix this we employed manual page breaks. Here are our settings: pagebreak: {mode: 'css', after: '.avoidThisRow'}

Then we got the height of the exported letter-sized PDF from here: https://github.com/MrRio/jsPDF/blob/master/docs/modules_html.js.html#L728 Since we’re always exporting in landscape, the height was 612. We then multiplied that by 1.33333, since that’s the point-to-pixel conversion.

We then looped through our table and kept a running count of the height. When the running height total exceeded 612 * 1.3, we added the avoidThisRow class to the previous TR. To offset the library’s page height calculations, we’d add a padding of ((numberOfPages - 1) * 2) + 8 to the top of the current row. We’d then reset our running height count to 0 - (numberOfRows / 40). Right now I’m not sure why we didn’t employ the same math for the padding and starting height.

Yeah, this is quite a gizmodic solution. So far it seems to work. I’m posting this so that it may help with somebody else with this issue, or possibly eventually help towards a fix to the library.

Thank you again for this crazy wicked awesome library. It was crucial for a feature we just built.