JSPDF Autotable中断行 [英] JSPDF Autotable breaks rows

问题描述

在网络应用程序中，我正在使用JSPDF Autotable构建PDF. 问题在于数据将是动态的(我将使用AngularJS 1.x)，因此行的高度可以不同.

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.

在某些情况下，自动表"会中断页面​​的最后一行，继续到下一页.如何防止这种行为，并将Autotable设置为采用最后一行(默认行会中断)并将其带到下一页?

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?

这是我的代码: 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 .:页眉的顶部是因为我要添加一张图片.

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

推荐答案

不幸的是，无法使用某些参数或样式来做到这一点.

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.

在源代码中，我发现，对于每一行，都会调用方法printFullRow，然后检查该行是否适合页面(方法canFitOnPage).

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

如果行不能容纳在页面上，请检查该行包含多少行文本(在我的情况下为10行).行被拆分，因为行数大于1.

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.

您需要将此数字更改为更大的数字.为了避免出现其他错误，您需要确保适合整个页面高度的行数应该为1，而不是1.如果您选择的字数过多，则如果文本太长而无法容纳整个页面，根本不会被渲染，因为common_1.addPage()会被无限执行.

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.

总而言之，将第470行更改为以下内容:

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

if (row.maxLineCount <= 50) {

除非页面上不能容纳50行...

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

之前:

之后:

请检查更新的小提琴: https://jsfiddle.net/9vgxvfkh/2/

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

这篇关于JSPDF Autotable中断行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！