页码必须用css伪元素+@media print实现，因window.print()不自动生成页码；手动插入的静态页码无法随分页递增，且浏览器只识别counter(page)；需用position:fixed锚定页脚，配合@page设置边距并注意safari兼容性。
window.print() 本身不生成页码，必须靠 CSS 伪元素 + @media print 实现，且仅在打印预览中可见，页面上不显示。
为什么直接写 <span>第1页</span> 不起作用
手动插入的页码是静态文本，无法随分页自动递增；打印引擎会按物理纸张切分内容，你写的“第1页”可能出现在第3页位置，甚至被截断。浏览器不解析 HTML 中的页码占位符，只认 CSS 的 counter(page)。
- 不要用 JS 动态往 DOM 插入页码元素——重排、异步、还原难，且无法跨页连续计数
- 避免用
visibility: hidden包裹页码容器，它仍占布局空间，可能推挤内容导致分页偏移 - 页码必须用
::before或::after伪元素注入，且声明为position: fixed才能锚定在每页固定位置
@media print 里怎么写页码才稳定
关键不是“加页码”，而是让页码在每页底部居中、不遮挡正文、且不因 margin/padding 错位。Chrome/Firefox 支持良好，Safari 需额外兜底。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础写法：
body::after { content: "第 " counter(page) " 页"; position: fixed; bottom: 20pt; left: 0; right: 0; text-align: center; font-size: 10pt; } - 要显示总页数，得加
@page { size: A4; margin: 1in; }+body::before { content: counter(page) " / " counter(pages); }（注意：counter(pages)仅在@page规则生效后可用） - Safari 不支持
counter(pages)，可降级为只显示当前页码，或服务端生成 PDF 补充总页数 - 如果页脚区域被裁剪，检查
@page的margin-bottom是否足够，打印预览里右键 → “检查” → 查看伪元素是否被overflow: hidden截断
表格跨页时页码和表头怎么不打架
长表格分页后，页码固定在页脚，但 thead 若没正确声明，会消失，用户看到第二页只有数据没列名——此时页码存在，但信息缺失，等于白加。
- 必须同时设：
thead { display: table-header-group !important; }，否则counter(page)正常，但表头不重复 - 给
table加break-inside: avoid !important;仅对短表格有效；超长表格需配合tbody分块，每块设break-before: page;，否则页码虽在，但表头错位 - 页码伪元素的
z-index在打印中无效，若表格撑满整页，页码可能被盖住——改用bottom: 0.5in而非20pt，并确保@page的margin-bottom≥ 0.5in - 测试时务必用 Ctrl+P 打开真实打印预览，截图或 PDF 导出插件会忽略
counter()或渲染错乱
页码不是装饰，是阅读线索；一旦表格跨页、样式未隔离、伪元素定位失效，它就从辅助变成干扰。最易忽略的是：没验证 @page margin 和伪元素 bottom 值的匹配关系，以及 Safari 下 counter(pages) 的静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
