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

Question

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.

Solution 1

Found the solution :)

In the DocDefinition you can add a function for pageBreakBefore like this:

content: [{
    text: getOfferClosingParagraph(),
    id: 'closingParagraph'
  }, {
    text: getSignature(),
    id: 'signature'
  }],
  pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
    //check if signature part is completely on the last page, add pagebreak if not
    if (currentNode.id === 'signature' && (currentNode.pageNumbers.length != 1 || currentNode.pageNumbers[0] != currentNode.pages)) {
      return true;
    }
    //check if last paragraph is entirely on a single page, add pagebreak if not
    else if (currentNode.id === 'closingParagraph' && currentNode.pageNumbers.length != 1) {
      return true;
    }
    return false;
  },

For more info about this function and the information provided take a look at this

Solution 2

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 :)
}

Solution 3

Simple example with texts:

var dd = {
    content: [
        'First paragraph',
        
        // page break before text
        {text: 'Text on the next page', pageBreak: 'before'},
        
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
        
        // page break after text
        {text: 'Text is lastest on the page', pageBreak: 'after'},
        
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]
}

Comments

[Nikhil Radadiya]

Getting page break with above code but not adding content to next page. Can you help me here?

[André Kool]

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.

[MazBeye]

I can confirm that this solution is working as advertised.

[svaj]

Works like a charm. I'm using pdfmake v0.1.58

[Ramtin]

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