pdfMake - 宽表分页符答案

【问题标题】：pdfMake - Wide Table Page BreakpdfMake - 宽表分页符
【发布时间】：2017-05-25 14:38:03
【问题描述】：

我正在使用 pdfMake 生成表格报告。一些报告非常宽，不适合标准页面宽度，即使在横向模式下也是如此。目前，当表格内容溢出页边距时，pdfMake 会切断表格内容。

我想在表格太宽时分页，就像行溢出到下一页时一样。

这可能使用 pdfMake 吗？

可以使用 pageBreakBefore 回调函数来解决这个问题吗？

谢谢

【问题讨论】：

你有没有找到解决这个问题的方法？我也面临同样的问题

标签： pdfmake

【解决方案1】：

是的，这可以通过 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;
            }
    }
}

我们如何确定列是否会溢出？我们有两种选择：

如果您使用的是引导数据表，则可以使用 html 中的“宽度”属性。
pdfmake 计算实际宽度，但您可能需要在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。

希望这会有所帮助！

【讨论】：

【解决方案2】：

只需像这样在表格对象中添加 dontBreakRows 属性

       table: {
                dontBreakRows: true,
                widths: [30,75,48,48,48,48,48,115],
                body: []
       }

【讨论】：

【解决方案3】：

此外，您可以使页面变宽并将页面方向更改为横向。

 pageSize: "A2",
 pageOrientation: "landscape",

【讨论】：