Dynamic check if text Goes to next page and add pagebreak in pdf using pdfmake

For a project im making offer and invoice pdf's on the fly using pdfmake in javascript. The problem im facing is having text blocks going off the page in the middle. What i want is to check if a certain block of text or a table is going to be split between pages and if so add a pagebreak before the block to make sure the text or table will be entirely on one page. My pdf docDefinition is build like this:

return < content: [ getOfferLogo(), //Get the logo or empty string getHeading(), //get the customer and business data (adress etc) //the above is always the same getText(), //get the textblock, created by user and always different getSpecifics(), //get a table of payment specifications getSignature() //get last textblock contaning signature fields etc, always the same ], styles: < subheader: < fontSize: 15, bold: true, alignment: 'center' >>, defaultStyle: < columnGap: 20, fontSize: 12 >>;

So in short how can i check if text will be going off the page before creating the pdf and add pagebreaks accordingly? Thanks in advance.

4 Answers 4

The pageBreakBefore function gives a lot of flexibility in determining whether the page break is required or not. However, I've found one more solution which is more straightforward and less documented but does all the magic automatically. It's a unbreakable: true attribute that came in 0.1.32 release. Also, it mentioned in the following thread https://github.com/bpampuch/pdfmake/issues/1228#issuecomment-354411288

How it works? For instance, you want to make a header and some text below it to be unbreakable. In order to do it, you have to wrap the header and the content in a stack and apply the unbreakable: true on it.

< stack: [ // header < text: 'Lorem ipsum dolor sit amet', bold: true, fontSize: 13 >, // content < text: 'Nulla iaculis magna vitae luctus euismod. Sed arcu risus, mattis non molestie et, condimentum sit amet justo. Quisque vitae neque magna. Etiam in tellus vitae arcu volutpat bibendum. In ullamcorper ante tortor, a viverra libero cursus eu. Phasellus quis massa nec lorem feugiat ultricies. Aliquam erat volutpat. Nullam a purus tempus, feugiat elit vel, tincidunt tortor.' >], unbreakable: true // that's the magic :) > 

I have moved on to different projects in the time after I asked this question years ago so unfortunatly I won't be able to validate this. But looking at this answer and the linked info you provided it sounds like a very good solution.

If you are using typescript and using the PDFmake types, you might need to set the type of the object to ContentStack

pay attention to the fact that if the unbreakable stack is longer than the page it will simply disappear. :\