在新的Chrome中打印html時如何打印頁碼？

Question

在Chrome版本52.0.2743.116 m（64位）中打印html時，我需要打印頁碼 。 但是我還沒有找到答案。

我已經嘗試過了：

@page {
    @bottom-right {
        content: counter(page) " of " counter(pages);
    }
}

這根本沒有用。

然后我找到了這個問答 ：

---

對於此答案，我們沒有使用@page，這是純CSS答案，但可以在FireFox 20+版本中使用。 這是一個示例鏈接。 CSS是：

#content {
    display: table;
 }
#pageFooter {
    display: table-footer-group;
 }

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
 }

HTML代碼是：

 <div id="content">
     <div id="pageFooter">Page </div>
     multi-page content here...
 </div>

---

不幸的是，這僅在FireFox 20+版本和Chrome版本35.0.1916.153中有效

降級不是答案。 你能幫我嗎？

Answer 1

此設置對我有用，您只需在每頁末尾添加一個元素即可將頁面計數器附加到該元素上。

碼：

HTML：

 body { counter-reset: section; } @media print { .page { page-break-after: always; } .page .pageEnd::after { counter-increment: section; /* Increment the section counter*/ content: "Page " counter(section) " "; /* Display the counter */ } } 

 <div class="page"> <h2>Here is page 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 6</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 7</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div>