14

在Chrome 版本 52.0.2743.116 m (64-bit)中打印 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

降级不是答案。你能帮我吗？

4

1 回答 1

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>

于 2016-12-29T19:04:39.690 回答