打印 html 时自动分页添加页码

Question

我想打印一个 HTML 页面，每页都有页码。我的 HTML 由一个包含不同大小行的表格组成。所以我无法判断何时会发生分页。我只是使用了“page-break-inside：避免；”在行中，因为我不想打破行内。

我尝试使用@page 属性，但它不起作用。

    @page {
        size: A4 portrait;
        margin: 11mm 17mm 17mm 17mm;
        counter-increment: page;

        @bottom-left {
            content: counter(page);
        }
    }

    @page:first {
        counter-reset: page 1;
    }

我尝试在页脚或页眉之后使用，但也不起作用。广告似乎打印在每一页上，但只计数一次。所以我不能用它作为反增量。始终保持为第 1 页。页脚也相同。

我的问题是在哪里放置反增量。我没有特定的元素来控制分页符。

HTML：

    <table>
    <thead>
        <tr>
            <td>
                <div class="header-space">
                    <%-- header code --%>
                </div>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="content">
                    <div class="content-block">
                        <p>
                            <asp:Repeater ID="rptTeste" runat="server" OnItemDataBound="rptTeste_ItemDataBound">
                                <ItemTemplate>
                                    <div id="divQuestao">
                                        <%-- rows of variate sizes code --%>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </p>
                    </div>

                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <div class="footer-space">
                    <%-- footer code --%>
                </div>
            </td>
        </tr>
    </tfoot>
    </table>

CSS：

    @media print {
    @page {
        size: A4 portrait;
        margin: 11mm 17mm 17mm 17mm;
    }


    body {
        float: none;
        margin-left: 0;
        margin-top: 0;
        counter-reset: page;
    }

    .header-space,
    .footer-space {
        height: 150px;
    }

    .footer-space::after { 
        top: 0px; position: relative;
        white-space: nowrap; 
        z-index: 20; width:100%;  margin:0 auto; text-align:center;
        counter-increment: page;
        content:"Page " counter(page);
    }       

    #divQuestao {
        page-break-inside: avoid;
        padding-top: 30px;
        text-align: justify;
    }
    }

打印时显示页码应该很容易！但事实并非如此！！

Answer 1

希望这个片段有帮助！这就是我处理页面计数器和页面计数的方式，使用部分 HTML 标签作为页面：

<style type="text/css">
    section::after {
        content: counter(page) " / " counter(pages);
    }
</style>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        let css = document.body.appendChild(document.createElement('style'));

        css.textContent = `section::after {counter-set: pages ${document.querySelectorAll('section').length}}`;
    });
</script>