我正在尝试使用CSS3 @page规则在浏览器中打印时添加页码,如下所示
@page {
size: A4;
margin: 5%;
padding: 0 0 10%;
}
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
我通过互联网知道这仅适用于Firefox link
我也尝试过这种link,仅用于段落,但是我的页面是由不同类型的元素组成的,例如table,div,p等
如何在通过任何浏览器进行打印的过程中添加页码
有人可以帮助我吗?
答案 0 :(得分:0)
复制css并进行一个文件调用,此调用在yourcss中进行,并在chrome advance选项的header和footer选项中完成,从而使id="www"
变为正文
<script type="text/javascript">
function PrintPanel() {
var panel = document.getElementById("www");
var printWindow = window.open();
printWindow.document.write(panel.innerHTML);
printWindow.document.write('<link href="yourecss.css" rel="stylesheet" />');
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
printWindow.close();
}, 1200);
return false;
}
</script>
答案 1 :(得分:-1)
.page{
counter-reset: page;
}
.page .page-number{
display:block;
}
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
display: block;
content: "Number of pages: " counter(page);
}
<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>