Don*_*ino 59 html css printing-web-page
我已经阅读了很多关于打印页码的网站,但是当我尝试打印时,我还是无法显示我的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我有最新支持的浏览器版本.
Don*_*ino 53
由于@page with pagenumbers目前在浏览器中不起作用,我一直在寻找替代品.
我找到了Oliver Kohll发布的答案.
我会在这里重新发布,这样每个人都可以更容易地找到它:
对于这个答案,我们不使用@page,这是一个纯CSS答案,但在FireFox 20+版本中工作.这是一个例子的链接.
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>
这样,您可以通过将参数编辑为#pageFooter来自定义页码.我的例子:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
这个技巧对我很有用.希望它会对你有所帮助.
WoI*_*IIe 16
尝试使用https://www.pagedjs.org/。它为所有主要浏览器填充了页面计数器、页眉/页脚功能。
@page {
@bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
与 PrinceXML、Antennahouse、WeasyPrince、PDFReactor 等替代品相比，它要舒服得多......
而且完全免费！没有定价或其他什么。它真的救了我的命！
你可以尝试一下,你可以使用 content: counter(page);
@page {
@bottom-left {
content: counter(page) "/" counter(pages);
}
}
参考:http://www.w3.org/TR/CSS21/generate.html#counters
http://www.princexml.com/doc/9.0/page-numbers/
小智 6
此 javascript 将在右下角添加带有页码的绝对定位 div，并适用于所有浏览器。
A4 高度 = 297mm = 1123px(96dpi)
<html>
<head>
<style type="text/css">
@page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = addPageNumbers;
function addPageNumbers() {
var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
for (var i = 1; i <= totalPages; i++) {
var pageNumberDiv = document.createElement("div");
var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
pageNumberDiv.style.position = "absolute";
pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
pageNumberDiv.style.height = "16px";
pageNumberDiv.appendChild(pageNumber);
document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
}
}
</script>
<div id="content">
Lorem ipsum....
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
138487 次 |
| 最近记录： |