在HTML打印页PDF中自动添加第2/2页,可以通过使用CSS的@page
规则和伪元素::after
来实现。
首先,在CSS样式表中定义一个@page
规则,用于设置打印页面的样式和布局。在该规则中,可以使用@top-left
、@top-right
、@bottom-left
、@bottom-right
等属性来设置页眉和页脚的内容。
然后,在@page
规则中使用伪元素::after
来添加页脚内容。通过设置content
属性来指定要显示的内容,可以使用CSS的计数器功能来自动显示当前页码和总页数。
以下是一个示例的CSS样式表代码:
@media print {
@page {
size: A4;
margin: 2cm;
@bottom-left {
content: "第" counter(page) "页";
}
@bottom-right {
content: "共" counter(pages) "页";
}
}
body::after {
content: "";
display: block;
page: last;
}
}
在上述代码中,@page
规则设置了打印页面的大小为A4纸张,页边距为2cm。@bottom-left
和@bottom-right
属性分别设置了页脚的左侧和右侧内容,使用了CSS的计数器功能来显示当前页码和总页数。
然后,在body::after
伪元素中设置content
属性为空,并且使用page: last
属性将该伪元素添加到最后一页。
使用以上CSS样式表,当将HTML页面打印为PDF时,会自动在每一页的页脚中显示当前页码和总页数。
注意:以上代码只是示例,具体的样式和布局可以根据实际需求进行调整。
推荐的腾讯云相关产品:腾讯云对象存储(COS),该产品提供了高可靠、低成本的对象存储服务,适用于存储和管理大规模非结构化数据。产品介绍链接地址:https://cloud.tencent.com/product/cos
领取专属 10元无门槛券
手把手带您无忧上云