我正在使用pdfMake生成表报告。一些报告非常宽,即使在横向模式下也不适合标准页面宽度。当前,当pdfMake溢出页面页边距时,它将截断表格内容。
我想在表太宽时分页,就像行溢出到下一页一样。
可以使用pdfMake吗?
可以使用pageBreakBefore回调函数对此进行帮助吗?
谢谢
最佳答案
是的,即使当前不是功能,也可以使用 pdfMake
来实现。
为此,您可以将溢出的列拆分为另一个表。我们可以将所有表放在一个数组中,然后按如下所示在docDefinition
中设置它们。
您可以在模板构造函数中定义表中所需的任何常用属性。
for (var i = 0; i < tables.length;i++) {
docDefinition.content[i] = new Template();
docDefinition.content[i].table.body = tables[i];
docDefinition.content[i].table.widths = widths[i];
if (i > 0) {
docDefinition.content[i].pageBreak = 'before';
}
}
function Template(){
this.table = {
dontBreakRows: true
};
//zebra stripes layout
this.layout = {
fillColor: function (row, node, col) {
return (row % 2 === 0) ? '#CCCCCC' : null;
}
}
}
我们如何确定列是否会溢出?我们有两种选择:pdfmake.js
中进行挖掘。 然后,循环遍历,增加宽度,直到超出限制为止(我的限制是8pt字体)。您可以对TH执行此操作,然后保存这些列拆分并将其用于TD。
如果最终页面几乎没有溢出,我们不希望最终页面只有一列,我们希望每个页面的宽度大致等于。我们计算所需的页面数,然后从那里找到所需的断点。为了更轻松地将页面链接在一起,可以在每个表的开头添加一个行号列。
var colSplits = [];
var tables = new Array();
function parseTHs(colSplits, tables) {
var colSum = 0;
var pageSize = 1120-7*rows.toString().length;
var paddingDiff = 11.9;
var columns = 0;
var prevSum;
var i = 0;
var width = $(".dataTables_scrollHeadInner > table").width();
var pages = Math.ceil(width/pageSize);
console.log("pages: "+pages);
var desiredBreakPoint = width/pages;
console.log("spread: "+desiredBreakPoint);
var limit = pageSize;
var row = ['#'];
var percent = '%';
widths.push(percent);
$(".dataTables_scrollHeadInner > table > thead > tr:first > th").each(function() {
prevSum = colSum;
colSum += $(this).outerWidth()-paddingDiff;
//if adding column brings us farther away from the desiredBreakPoint than before, kick it to next table
if (colSum > limit || desiredBreakPoint-colSum > desiredBreakPoint-prevSum) {
tables[i] = [row];
row = ['#'];
widths.push(percent);
colSplits.push(columns);
i++;
desiredBreakPoint += width/pages;
limit = prevSum+pageSize;
}
row.push({text: $(this).text(), style:'header'});
widths.push(percent);
columns++;
});
//add the final set of columns
tables[i] = [row];
}
function parseTDs(colSplits, tables) {
var currentRow = 0;
$("#"+tableId+" > tbody > tr").each(function() {
var i = 0;
var row = [currentRow+1];
var currentColumn = 0;
var split = colSplits[i];
$(this).find("td").each(function() {
if (currentColumn === split) {
tables[i].push(row);
row = [currentRow+1];
i++;
split = colSplits[i];
}
row.push({text: $(this).text()});
currentColumn++;
});
//add the final set of columns
tables[i].push(row);
currentRow++;
});
}
parseTHs(colSplits, tables);
parseTDs(colSplits, tables);
注意:如果您希望这些列填充所有可用页面,那么在link上有一个很好的实现方法。我只是为宽度添加了'%'并将该代码添加到
pdfmake.js
中。希望这可以帮助!