JSPDF Autotable breaks rows

11.8k views Asked by At

In web app I'm using the JSPDF Autotable to build a PDF. The problem is that the data will be dynamic (I'm going to use AngularJS 1.x) and so the rows can have differents height.

In some cases, Autotable breaks the last row of the page, continuing to the next one. How can I prevent this behavior, and set up Autotable to take the last row (which default would break) and bring it to the next page?

This is my code: https://jsfiddle.net/9vgxvfkh/1/

I guess I have to change some settings in the style:

styles: {
    cellPadding: 1.5,
    overflow: 'linebreak',
    valign: 'middle',
    halign: 'center',
    lineColor: [0, 0, 0],
    lineWidth: 0.2 
},
pageBreak: 'always'

But I tried, and it didn't work.

P.S.: The margin top on the header is because then I will add an image.

2

There are 2 answers

1
luke On BEST ANSWER

Unfortunately, there is no way to do it using some parameters or styles.

I did a quick debug and found a solution for your problem, you need to modify the source code slightly.

image

In the source code I found that, for each row a method printFullRow is called, after that there is a check if the row can fit on the page (method canFitOnPage).

If row cannot fit on page, there is a check how many lines of text does it contain (in my case it is 10). Row is being split, because number of lines is bigger than 1.

You need to change this number to something bigger. In order to avoid further bugs you need to ensure how many lines would fit entire page height and put this number instead of 1. If you would choose some enormous amount, in case of really long text that wouldn't even fit entire page, it wouldn't be rendered at all, because common_1.addPage() would be executed endlessly.

To sum up, change line 470 to something like this:

if (row.maxLineCount <= 50) {

Unless 50 lines can't fit on page...

Before: enter image description here

After: enter image description here

Please check updated fiddle: https://jsfiddle.net/9vgxvfkh/2/

0
Simon Bengtsson On

Using the latest version this particular example is fixed. But for other cases where you don't want a multi line row to be split you can use rowPageBreak: 'avoid'.