You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用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>

我的疑问

  1. 是不是我初始化/递增计数器的方式错了?比如counter-reset和counter-increment的位置不对?
  2. 我在@bottom-center里加了position: absolute、display: block这些属性,会不会这些属性在页边距盒子里不被支持,反而导致内容无法渲染?
  3. 会不会是我用的PDF生成库(比如Puppeteer、html-pdf这类)对counter(pages)或者@page规则的支持有问题?有没有已知的兼容性坑?

预期结果

我希望每一页的底部居中位置,能显示亮红色、45px字号的「Page X of Y」文本,比如第一页显示「Page 1 of 10」,但现在所有页面的这个位置都是空白的。

有没有大佬能帮我看看问题出在哪?感激不尽!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 07:17:59