纯 CSS 无法实现周期性页码（如循环显示 1/2/3），但可通过 JavaScript 动态注入页脚并结合 @media print 样式，在打印前按模运算生成重复序号，打印后自动清理，兼顾语义性与兼容性。
纯 css 无法实现周期性页码（如循环显示 1/2/3），但可通过 javascript 动态注入页脚并结合 `@media print` 样式，在打印前按模运算生成重复序号，打印后自动清理，兼顾语义性与兼容性。
在 Web 打印场景中，CSS 的 @page 规则仅支持内置计数器（如 counter(page)），其行为是严格递增的，不支持重置、取模或自定义逻辑。因此，要实现类似 1, 2, 3, 1, 2, 3… 的周期性页码（例如每 3 页循环一次），必须借助 JavaScript 在打印生命周期中动态干预。
核心思路是：
✅ 将文档结构化为显式的「页面容器」（如 .page）；
✅ 利用 window.beforeprint 事件，在用户触发打印前批量计算每页对应周期值（index % 3 + 1）；
✅ 动态插入带样式的页码 <div> 到每个容器底部；<br>
✅ 利用 <code>window.afterprint 清理临时元素，避免影响屏幕浏览体验。
以下为完整可运行示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周期性页码打印示例</title>
<style>
@media screen {
.page { margin-bottom: 2rem; }
.page-number { display: none; } /* 屏幕下隐藏页码 */
}
@media print {
.page {
page-break-after: always;
position: relative;
min-height: 95vh; /* 确保单页内容撑满视口，避免跨页截断 */
}
.page-number {
position: absolute;
bottom: 0.5cm;
left: 0;
width: 100%;
text-align: center;
font-size: 12px;
color: #666;
font-family: sans-serif;
}
body { margin: 0; }
}
</style>
</head>
<body>
<div class="page"><p>第一页内容 —— 应显示「Page 1」</p></div>
<div class="page"><p>第二页内容 —— 应显示「Page 2」</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div>
<div class="page"><p>第三页内容 —— 应显示「Page 3」</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div>
<div class="page"><p>第四页内容 —— 应显示「Page 1」</p></div>
<div class="page"><p>第五页内容 —— 应显示「Page 2」</p></div>
<div class="page"><p>第六页内容 —— 应显示「Page 3」</p></div>
<script>
const PERIOD = 3; // 可配置周期长度
const PAGES = document.querySelectorAll('.page');
function renderPageNumbers() {
PAGES.forEach((page, i) => {
const cycleNum = (i % PERIOD) + 1;
const footer = document.createElement('div');
footer.className = 'page-number';
footer.textContent = `Page ${cycleNum}`;
page.appendChild(footer);
});
}
function cleanupPageNumbers() {
document.querySelectorAll('.page-number').forEach(el => el.remove());
}
window.addEventListener('beforeprint', renderPageNumbers);
window.addEventListener('afterprint', cleanupPageNumbers);
</script>
</body>
</html>? 关键注意事项：
- ✅ 必须为每页内容包裹独立容器（
.page），不可依赖自然分页——因为@page的@top-center等区域无法执行 JS 计算； - ✅ 使用
page-break-after: always显式分页，比依赖break-inside: avoid更可靠； - ⚠️ Safari 对
beforeprint/afterprint支持较弱（部分版本不触发），建议在 Chrome / Edge 中优先验证； - ? 周期长度
PERIOD可自由修改（如设为4即实现1,2,3,4,1,2,3,4…），逻辑清晰易维护； - ?
afterprint清理确保页面在非打印状态下保持干净，不影响响应式布局或交互。
该方案在保持 HTML 语义化的同时，以最小侵入方式达成目标，是当前浏览器环境下实现周期性打印页码最实用、兼容性最佳的工程解法。
