我已经阅读了很多关于打印页码的网站,但是当我尝试打印时,我还是无法显示我的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打印就像这样简单:
@page {
@top-left {
content: "TOP SECRET";
color: red
}
@bottom-center {
content: counter(page);
font-style: italic
}
}
但Chrome打印预览并保存为pdf似乎根本无法识别这一点.如何在引用时正确设置页眉和页脚？
编辑:@page没有参考支持
但是,我还有其他选择吗？我不是在网站上工作.该产品仅需要pdf作为结果.我可以接受chrome,webkit,plantomjs等.
我为我的网页修改了一个CSS页面编号解决方案.
它会自动显示"Page 1","Page 2"等.我希望它显示"第1页,共5页","第2页,共5页"等.
@media print {
thead span.page-number:after {
counter-increment: page;
content: "Page " counter(page) " of ?";
}
}
HTML :(原谅我使用表而不是CSS display: table-header-group)
<table>
<thead>
<tr>
<td>
<span class="page-number"></span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
..............................................................
</td>
</tr>
</tbody>
</table>
有没有办法添加总页数来代替我的?？
我只对Firefox或Chrome的最新版本感兴趣.
到目前为止,我目前的解决方案是使用服务器为每页创建一个元素,但要以这种方式获得最佳页面分解要困难得多.该<thead>解决方案是简单得多.
我试过玩CSS3的功能@page和counter(page)功能,但我看不到任何页码添加到打印输出.无论我做什么,看起来这根本不起作用.
我的脚手架看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
<head>
<body>
<div>
Lorem ipsum dolor...
/* this gets long, 2 pages of text */
</div>
</body>
</html>
我正在测试它的方式是我在浏览器中打开页面,将其打印到PDF文件,最后我正在验证内容.在不同的浏览器中,输出有点不同,但我无法看到正确的页码.
操作系统:Linux Mint
浏览器:Chromium 25.0.1364.160,Firefox 20.0.1,Opera(最新来自包管理器)
有任何想法吗？
我必须支持的浏览器是 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 解决方案。
我相信我已经测试了StackOverflow上所有可用的解决方案，但都没有在Chrome（72）中运行。我在W3C上遵循了规范，但一切似乎只能在FireFox中工作。
我只想做一个简单的事情-使用反增量将页码添加到打印的文档中。我尝试了HTML4和HTML5，但没有任何结果。
有什么解决办法吗？
Chrome版本：72.0.3626.81（官方内部版本）（64位）
解决方案在FireFox中运行良好：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
</style>
<body>
<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>
</body>
</html>
另一种解决方案（HTML5不支持@page）：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
截至2015年12月3日，主要浏览器似乎不支持@ bottom-center之类的边距框，如下所示。如果您搜索“ @ bottom-center”，则会看到很多红色的“不支持”框。当您搜索网络时，听起来好像它们可以工作，但实际上还不支持它们。分页媒体的某些元素可以很好地工作，例如分页之后，但页边距框却不能。– James Toomey 2015年12月3日20:40
相似的线程（旧的，Chrome没有分辨率）：
我已经寻找这个答案有一段时间了，但找不到任何可以正常工作的东西。我有这两个想法，看起来在很长一段时间内根本行不通：
还有其他办法吗？