打印html时在页面上打印页码 [英] Print page numbers on pages when printing html
问题描述
我已经阅读了很多关于打印页码的网站,但是当我尝试打印页面时,我仍然无法显示我的html页面。
所以CSS代码是下一个:
I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
我试图把这个页面规则放在
I've tried to put this page rule inside
@media all {
*CSS code*
}
除此之外,试图把它放在 @media print
在我的页面上显示页码。我试图使用FireFox和Chrome(基于WebKit,你知道)。我认为问题是在我的HTML或CSS代码。
有人可以告诉我一个例子,在大html页面中实现这个 @page
规则?我只需要html页面的代码和css文件的代码,工作。
P.S.我有最新支持的浏览器版本。
And outside of it, tried to put it in @media print
, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code.
Could somebody show me an example of implementing this @page
rule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.
推荐答案
As ppageum在浏览器中不起作用
我找到了一个答案由 发布。
我会在这里转发,以便每个人都能更容易找到:
对于这个答案,我们不使用@page ,这是一个纯CSS答案,但工作在FireFox 20+版本。以下是示例的链接。
CSS是:
As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
HTML代码是:
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
这样,您可以通过将参数编辑为 #pageFooter 。我的示例:
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
希望它会帮助你。
这篇关于打印html时在页面上打印页码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!