Question

WebKit仅在第一页上打印<thead>和<tfoot>。根据{{3}} <thead>和<tfoot>：

打印长表时，可以在包含表数据的每个页面上重复表头和脚信息

我们正在使用基于WebKit的Rotativa来呈现PDF，并且在每个页面上都没有呈现thead和tfoot的问题。

有没有解决方法或切换来解决这个问题？

Answer 1

BEGIN HACK

最后，我使用以下JS脚本将我的表拆分为多个页面：

<script>
    function splitTable(table, maxHeight, firstPageMaxHeight) {
        var header = table.children("thead");
        if (!header.length)
            return;

        var headerHeight = header.outerHeight();
        var header = header.detach();

        var splitIndices = [0];
        var rows = table.children("tbody").children();

        maxHeight -= headerHeight;
        var currHeight = 0;
        var firstPage = true;
        rows.each(function (i, row) {
            currHeight += $(rows[i]).outerHeight();
            if (firstPage) {
                currHeight += (maxHeight - firstPageMaxHeight);
                firstPage = false;
            }
            if (currHeight > maxHeight) {
                splitIndices.push(i);
                currHeight = $(rows[i]).outerHeight();

            }
        });
        splitIndices.push(undefined);

        table = table.replaceWith('<div id="_split_table_wrapper"></div>');
        table.empty();

        for (var i = 0; i < splitIndices.length - 1; i++) {
            var newTable = table.clone();
            header.clone().appendTo(newTable);
            $('<tbody />').appendTo(newTable);
            rows.slice(splitIndices[i], splitIndices[i + 1]).appendTo(newTable.children('tbody'));
            newTable.appendTo("#_split_table_wrapper");
            if (splitIndices[i + 1] !== undefined) {
                $('<div style="page-break-after: always; margin:0; padding:0; border: none;"></div>').appendTo("#_split_table_wrapper");
            }
        }
    }

    $(document).ready(function () {
        splitTable($(".po-report"), 2100, 600);
    });
</script>

END HACK

webkit中每个页面的解决方法和打印方式

1 个答案: