html - Webkit のすべてのページに印刷される回避策

Question

WebKitは最初のページにのみ印刷されます<thead>。W3と<tfoot>によると: <thead><tfoot>

長い表を印刷すると、表データを含む各ページで表の頭と脚の情報が繰り返される場合があります。

PDFをレンダリングするためにWebKitに基づくRotativaを使用しており、すべてのページでレンダリングされないという問題が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