我正在使用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;
            }
    }
}
我们如何确定列是否会溢出?我们有两种选择:
  • 如果使用引导数据表,则可以在html中使用“width”属性。
  • 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中。
    希望这可以帮助!

    10-06 14:59