JSPDF Autotable breaks rows

こ雲淡風輕ζ 提交于 2021-01-03 08:44:39

问题


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.


回答1:


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.

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:

After:

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




回答2:


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'.



来源:https://stackoverflow.com/questions/46022169/jspdf-autotable-breaks-rows

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!