关于CSS：打印html时在页面上打印页码


Print page numbers on pages when printing html

我已经阅读了很多有关打印页码的网站，但是当我尝试打印html页面时，仍然无法显示它。
接下来是CSS代码：

1
2
3
4
5
6
7
8
9
10
@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

我已尝试将此页面规则放入

1
2
3
@media all {
    *CSS code*
}

在其外部，尝试将其放在@media print中，但是没有任何帮助我在页面上显示页码。我尝试使用FireFox和Chrome(您知道基于WebKit的浏览器)。我认为问题出在我的HTML或CSS代码中。有人可以告诉我一个在具有多个页面的大html页面中实现此@page规则的示例吗？我只需要html页面的代码和css文件的代码即可。
P.S.我拥有最新支持的浏览器版本。

相关讨论

由于具有页码的@page暂时无法在浏览器中工作，因此我一直在寻找替代方案。
我找到了奥利弗·科尔(Oliver Kohll)发布的答案。
我会在这里重新发布它，以便每个人都可以更轻松地找到它：
对于此答案，我们没有使用@page，这是一个纯CSS答案，但可以在FireFox 20版本中使用。这是一个示例链接。
CSS是：

1
2
3
4
5
6
7
8
9
10
11
12
#content {
    display: table;
}

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

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

HTML代码为：

1
2
  Page
  multi-page content here...

这样，您可以通过将参数修改为#pageFooter来自定义页码。我的例子：

1
2
3
4
5
6
7
8
9
10
11
#pageFooter:after {
    counter-increment: page;
    content:"Page" counter(page);
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20;
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

这个技巧对我来说很好。希望对您有帮助。

相关讨论

尝试使用https://www.pagedjs.org/。它为所有主要浏览器填充页面计数器，页眉/页脚功能。

1
2
3
4
5
@page {
  @bottom-left {
    content: counter(page) ' of ' counter(pages);
  }
}

与PrinceXML，Antennahouse，WeasyPrince，PDFReactor等替代方案相比，它要舒适得多...

它是完全免费的！没有定价或其他。这真的救了我的命！

相关讨论

您可以试试吗，可以使用content: counter(page);

1
2
3
4
5
     @page {
       @bottom-left {
            content: counter(page)"/" counter(pages);
        }
     }

参考：http://www.w3.org/TR/CSS21/generate.html#counters

http://www.princexml.com/doc/9.0/page-numbers/

相关讨论

此javascript将在页面的右下角添加绝对定位的div \\页面编号，并在所有浏览器中均可使用。

A4高度= 297mm = 1123px(96dpi)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
        <style type="text/css">
            @page {
              size: A4;
              margin: 0;
            }

            body {
              margin: 0;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
          window.onload = addPageNumbers;

          function addPageNumbers() {
            var totalPages = Math.ceil(document.body.scrollHeight / 1123);  //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
            for (var i = 1; i <= totalPages; i++) {
              var pageNumberDiv = document.createElement("div");
              var pageNumber = document.createTextNode("Page" + i +" of" + totalPages);
              pageNumberDiv.style.position ="absolute";
              pageNumberDiv.style.top ="calc((" + i +" * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
              pageNumberDiv.style.height ="16px";
              pageNumberDiv.appendChild(pageNumber);
              document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
              pageNumberDiv.style.left ="calc(100% - (" + pageNumberDiv.offsetWidth +"px + 20px))";
            }
          }
       
       
            Lorem ipsum....
       
    </body>
</html>
相关讨论

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

此JS库采用您的HTML / CSS并将其切成页面，准备作为书打印，您将在浏览器中进行预览。它使@page和大多数CSS3规范都适用于Chrome。

解决方案1(简单)，如果可以将视图切成页面，可以打印了

只需将其CDN添加到页面的head标记中：

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

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

将HTML放置在要显示当前页码的任何地方：

1
 

使数字显示在div中的CSS：

1
2
3
.page-number{
  content: counter(page)
}

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

解决方案2(trickier)如果只想在打印时显示数字(和分页符)

在这种情况下，仅在打印文档时才需要应用Paged.js CDN。
我能想到的一种方法是添加一个将Javascript触发到

的print me按钮

  • 将CDN添加到页面
  • 然后执行 window.print();以启动导航器的打印提示

    • 我知道这不是一个编码答案，但这是OP想要的，也是我花了半天的时间才能实现的-从带有页码的网页打印。

    • 不带数字打印为pdf
    • 在此处通过ilovepdf运行它https://www.ilovepdf.com/add_pdf_page_number，它会添加页码

    是的，它是两个步骤而不是一个步骤，但是尽管搜索了几个小时，但我仍然找不到任何CSS选项。真可惜，所有浏览器都删除了允许它使用的功能。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
       **@page {
                margin-top:21% !important;
                @top-left{
                content: element(header);

                }

                @bottom-left {
                content: element(footer
     }
     div.header {

                position: running(header);

                }
                div.footer {

                position: running(footer);
                border-bottom: 2px solid black;


                }
               .pagenumber:before {
                content: counter(page);
                }
                .pagecount:before {
                content: counter(pages);
                }      
     
                    <span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
                </div >**
    相关讨论

    这是您想要的：

    1
    2
    3
    4
    5
    @page {
       @bottom-right {
        content: counter(page)" of" counter(pages);
       }
    }
    相关讨论