使用CSS @page规则添加的页码计数器在生成的PDF中不显示的问题求助
使用CSS @page规则添加的页码计数器在生成的PDF中不显示的问题求助
我现在在开发一个功能:用Node.js后端渲染EJS模板生成HTML,再把HTML转成PDF健康报告。核心需求是给每一页的底部加上「Page X of Y」的页码,但折腾了好久,其他内容、自动分页都正常工作,唯独底部的页码完全不显示——就好像这段CSS根本没起作用一样,可我明明已经把样式调得极其显眼了!
问题详情
我的目标是让PDF的每一页底部居中显示「Page X of Y」的计数器文本。我用了CSS Paged Media模块的@page规则,配合@bottom-center页边距盒子,还特意把字体设为亮红色、45px超大号,就是为了确保如果能渲染的话绝对能一眼看到。但现在所有页面的底部都是空的,完全看不到页码的影子,其他CSS样式(比如内容的排版、分页)都正常生效了。
我已经尝试的方案
我的技术栈是Node.js + EJS + HTML转PDF,下面是我在report.ejs里加的相关CSS和HTML结构:
相关CSS代码(放在EJS的<style>标签里)
.report-container { /* 初始化页码计数器 */ counter-reset: page; } .section-content { /* 每次触发分页的新章节,递增计数器 */ counter-increment: page; } /* 打印/PDF生成的样式定义 */ @page { @bottom-center { /* 我尝试的页码样式,特意弄成显眼的样子 */ display: block; width: 100%; height: 100%; position: absolute; text-align: center; color: rgb(188, 0, 0); /* 亮红色,确保可见 */ font-size: 45px; /* 超大字号 */ content: "Page " counter(page) " of " counter(pages); z-index: 1000; } }
简化后的EJS/HTML结构
除了第一个分组,每个page-group都会触发分页:
<div class="report-container"> <% pageGroups.forEach((group, index) => { %> <table class="page-table" <%- index > 0 ? 'style="page-break-before: always;"' : '' %>> <thead> <tr> <td class="page-header"> <!-- 页眉内容 --> </td> </tr> </thead> <tbody> <tr> <td class="page-content"> <div class="section-content content-area"> <!-- 页面主要内容 --> </div> </td> </tr> </tbody> <tfoot> <tr> <td class="page-footer"> <!-- 这里留空,因为我想用@page规则实现页脚 --> </td> </tr> </tfoot> </table> <% }); %> </div>
我的疑问
- 是不是我初始化/递增计数器的方式错了?比如
counter-reset和counter-increment的位置不对? - 我在
@bottom-center里加了position: absolute、display: block这些属性,会不会这些属性在页边距盒子里不被支持,反而导致内容无法渲染? - 会不会是我用的PDF生成库(比如Puppeteer、html-pdf这类)对
counter(pages)或者@page规则的支持有问题?有没有已知的兼容性坑?
预期结果
我希望每一页的底部居中位置,能显示亮红色、45px字号的「Page X of Y」文本,比如第一页显示「Page 1 of 10」,但现在所有页面的这个位置都是空白的。
有没有大佬能帮我看看问题出在哪?感激不尽!
内容来源于stack exchange
相关产品推荐
相关产品推荐

