46

所以我知道这个选项：Page numbers with CSS/HTML。

到目前为止，这似乎是将页码添加到页面的打印版本的最佳方法，但我无法在任何地方得到任何变体。我已经在 Chrome、Firefox 和 IE9 中尝试了我的 Windows 7 机器。根据一些链接，Prince XML 等更多专有软件可能支持此功能。Web 浏览器是否支持打印版本？

我尝试只制作一个空白的 html 文件，并在头部添加两个样式标签：

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

我还简化了它，甚至只是content: "TEXT";用来看看我是否可以展示一些东西。这在任何地方都支持吗？通过“this”，我特别指的是@pageand@bottom-right标签，因为我已经让内容工作了很多次。

4

5 回答 5

17

我也一直在尝试实现分页媒体，并且根据此 Wikipedia 页面发现，浏览器尚不支持边距框。难怪它不会工作！

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

请参阅表格、语法和规则、边距框部分。页边距框是页码以及运行页眉和页脚所需要的。实现这一点将为我节省将打印媒体转换为 PDF 的开销。

于 2013-07-19T17:52:39.080 回答
11

不使用@page，但我已经获得了在 Firefox 20 中工作的纯 CSS 页码：

http://jsfiddle.net/okohll/QnFKZ/

要打印，请右键单击结果框（右下角）并选择

此框架-> 打印框架...

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>
于 2013-05-20T14:03:46.030 回答
5

这似乎不再起作用了。似乎它只工作了很短的时间，浏览器支持被删除了！

根据https://developer.mozilla.org/en-US/docs/CSS/Counters，必须先重置计数器才能使用。

您可以将起始编号设置为任意值，默认为 0。

例子：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... 理论上。在现实世界中，只有 PrinceXML 支持这一点。

于 2013-04-06T21:34:22.543 回答
2

通过 Mozilla，（打印文档）

这会在每个打印页面上放置页眉和页脚。这在 Mozilla 中运行良好，但在 IE 和 Chrome 中不太好。

<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
  Heading for paged media
</div>
<div id="print-foot">
  Page: 
</div>
</body>
</html>

CSS：

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {

h1 {
   page-break-before: always;
   padding-top: 2em;
}

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
}

#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;

    font-size: 200%;
    text-align: center;
}

#print-foot {
   display: block;
   position: fixed;
   bottom: 0pt;
   right: 0pt;

  font-size: 200%;
}

#print-foot:after {
    content: counter(page);
    counter-increment: page;
}
于 2016-03-25T22:40:00.547 回答
1

如果您希望在 Chrome/Chromium 下打印时添加页码，一种简单的解决方案是使用Paged.js。

这个 JS 库获取您的 HTML/CSS 并将其切割成页面，准备好作为一本书打印，您将在浏览器中进行预览。它使@page大多数 CSS3 规范适用于 Chrome。

解决方案 1（简单）如果您可以将视图切割成页面，准备打印

只需将他们的 CDN 添加head到您页面的标签中：

<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

然后，您可以使用自动计数器添加页码page。例子 ：

HTML 放在任何你想显示当前页码的地方：

<div class="page-number"></div>

CSS 使数字出现在 div 中：

.page-number{
  content: counter(page)
}

该库还允许轻松管理页边距、页脚、页眉等。

解决方案 2（更棘手）如果您只想在打印时显示数字（和分页符）

在这种情况下，您只需要在打印文档时应用 Paged.js CDN。我能想到的一种方法是将print me触发 Javascript 的按钮添加到：

  1. 将 CDN 添加到页面
  2. 然后执行 window.print();启动导航器的打印提示
于 2021-03-18T10:22:04.713 回答