相关疑难解决方法(0)

我已经阅读了很多关于打印页码的网站,但是当我尝试打印时,我还是无法显示我的html页面.
所以CSS代码是下一个:

@page {
  margin: 10%;

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

我试过把这个页面规则放在里面

@media all {
    *CSS code*
}

在它之外,试图把它放进去@media print,但没有任何帮助我在我的页面上显示页码.我试过使用FireFox和Chrome(如你所知,基于WebKit).我认为问题出在我的html或css代码中.
有人能告诉我一个@page在几个页面的大html页面中实现这个规则的例子吗？我只需要html页面的代码和css文件的代码,这是有效的.
PS我有最新支持的浏览器版本.

一个有趣的用例已经出现在我们面前,我们要求当我们打印一个网站时,打印的副本将有一个页面页眉和页脚,页脚内部有页码.

任何人都知道如何实现这一目标？

注意:浏览器版本可以是最新的,客户端是其他Web开发人员.

所以我知道这个选项:带有CSS/HTML的页码.

到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本？

我试过制作一个空白的html文件,并在头部添加两个样式标签:

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

我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方？通过'this',我特别指的是@page和@bottom-right标签,因为我已经有很多次内容工作了.

我必须支持的浏览器是 Chrome（在我的项目中使用电子），因此不能选择使用任何其他浏览器。

我已经寻找这个问题的解决方案有一段时间了，它似乎没有答案。我尝试过使用这种形式的方法（从@media print 的 CSS 页面 x of y复制）：

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>

上述方法适用于 FF，但不适用于 Chrome。似乎thead/tfootchrome 在打印预览的每个打印页面上重复，但它不会导致任何计数器增量。在每个打印页上打印相同的计数器值。

我也尝试过涉及 的方法@page，但这似乎在几年前就停止工作了。

示例（从浏览器支持 CSS 页码复制）：

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

有谁知道这个问题的解决方法？还是我死在水里了？欢迎任何 javasript/nodejs 解决方案。