我已经阅读了很多关于打印页码的网站,但是当我尝试打印时,我还是无法显示我的html页面.
所以CSS代码是下一个:
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
Run Code Online (Sandbox Code Playgroud)
我试过把这个页面规则放在里面
@media all {
*CSS code*
}
Run Code Online (Sandbox Code Playgroud)
在它之外,试图把它放进去@media print,但没有任何帮助我在我的页面上显示页码.我试过使用FireFox和Chrome(如你所知,基于WebKit).我认为问题出在我的html或css代码中.
有人能告诉我一个@page在几个页面的大html页面中实现这个规则的例子吗?我只需要html页面的代码和css文件的代码,这是有效的.
PS我有最新支持的浏览器版本.
所以我知道这个选项:带有CSS/HTML的页码.
到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本?
我试过制作一个空白的html文件,并在头部添加两个样式标签:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
Run Code Online (Sandbox Code Playgroud)
我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方?通过'this',我特别指的是@page和@bottom-right标签,因为我已经有很多次内容工作了.
我会先说这个问题,我之前已经问过这个问题,但我能找到的所有答案似乎都引用了一个不再有效的过时解决方案(至少在Firefox 56 [64位]中)
过时的方法是曾经有一个自动实例化的CSS计数器命名pages,所以从这个SASS生成一小段CSS:
footer {
position: fixed;
bottom: 0;
left: 20px;
&:after {
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);
}
}
Run Code Online (Sandbox Code Playgroud)
习惯做我想做的事.现在它显示"Page [x]为0".
我已经尝试使用这个CSS来重新创建我自己的max-page计数器:
@page {
counter-increment: maxpage;
}
Run Code Online (Sandbox Code Playgroud)
但是,当在我的页脚中使用时,这也会返回0.
是否有任何合理的跨浏览器友好方式来获得此功能?
我已经寻找这个答案有一段时间了,但找不到任何可以正常工作的东西。我有这两个想法,看起来在很长一段时间内根本行不通:
还有其他办法吗?