html - 解决方法并打印在 webkit 中的每个页面上

Question

WebKit仅在第一页上<thead>打印。<tfoot>根据W3 <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