首页 > web前端 > css教程 > 为什么无法打印 HTML 格式的页码以及解决方法是什么?

为什么无法打印 HTML 格式的页码以及解决方法是什么?

Susan Sarandon
发布: 2024-12-14 14:47:11
原创
667 人浏览过

Why Can't I Print Page Numbers in HTML and What's the Workaround?

无法在 HTML 页面上打印页码?

问题描述:

尽管进行了大量研究,页码还是失败打印 HTML 文档时出现。

CSS 代码使用:

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
登录后复制

在 @media all 块内部和外部都尝试了 @page 规则,但没有成功。

解决方案:

由于网络浏览器的限制,使用@page实现页码是不可行的。 Oliver Kohll 提供了另一种解决方案,它利用 CSS 中基于表格的格式,而不依赖于@page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
登录后复制

HTML:

<div>
登录后复制

自定义:

页码的外观可以通过修改来自定义#pageFooter 的属性,例如文本格式、定位和背景样式。

以上是为什么无法打印 HTML 格式的页码以及解决方法是什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板