小编TSP*_*TSP的帖子

css:在 Chrome 中对打印的页面进行编号

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

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

CSS是:

#content {
    display: table;
}

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

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
Run Code Online (Sandbox Code Playgroud)

而 HTML 代码是:

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>
Run Code Online (Sandbox Code Playgroud)

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

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

示例(从浏览器支持 CSS 页码复制):

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

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

html javascript css google-chrome node.js

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

google-chrome ×1

html ×1

javascript ×1

node.js ×1