PDF 页眉页脚与页码设置：完整实战指南

合同、报告、周报这类正式文档，页眉页脚是刚需：页眉放文档标题或公司名，页脚放页码，阅读、打印和归档都更规范，客户和专业读者的认可度也更高。但很多前端 PDF 方案里，页眉页脚要么不支持，要么需要逐页手动添加，非常痛苦。dompdf.js 原生支持页眉页脚和页码，配合 @page 分页媒体属性，可以用标准 CSS 写法实现页眉、页脚、页码的自动生成，支持“第 X 页 / 共 Y 页”格式，还能让封面页不显示页码。本文用完整的代码示例，把页眉页脚和页码的常用配置方式、设计规范和特殊页面处理一次讲清楚，让你十分钟内给自己的文档加上专业页眉页脚，交付观感立刻提升一个档次，客户对产品的专业度评价也会明显改观。

页眉页脚的应用场景

正式文档几乎都需要页眉页脚：投标文件页眉放项目名和公司名，合同页脚放页码，周报页眉放部门名称；格式统一、信息完整，文档才显得专业可信，这是商务文档的基本礼仪，也是客户评估专业度的细节，不能省。

没有页眉页脚的 PDF 在打印、装订后难以区分章节和页码，多页文档尤其明显；手动在每一页添加又费时且容易出错，改一次版式就要全部重来，维护成本居高不下，几十页的文档更是灾难，自动化是唯一出路，用 dompdf.js 配置一次即可长期复用。

dompdf.js 的页眉页脚在排版阶段自动生成并随分页更新：一次配置、全程生效，模板调整后所有页面自动同步，维护成本几乎为零，几十页的文档也无需逐页处理，省下的时间非常可观，团队效率明显提升，设计、开发、运营都能直接维护模板，跨角色协作更顺畅。

页眉页脚的设计规范

页眉一般放文档标题、公司名或 logo，字号小于正文、颜色偏浅，避免喧宾夺主；页脚通常放页码、日期或保密级别，信息简洁为主，阅读时不被干扰，整体观感干净清爽，专业感强，读者体验也更舒适，页眉页脚的信息要和文档内容互补，而不是重复。

页眉页脚要避开正文区域：通过 @page 的 margin 为页眉页脚预留空间，正文从内容区开始排版，两者互不遮挡，打印装订也不会压到内容，版式干净利落，这是最容易踩的坑，务必先规划好边距，再写内容模板，边距不足时页眉页脚会和正文挤在一起，返工很麻烦。

常见布局：页眉居中放标题、页脚居中放页码，或者左侧标题、右侧页码；位置通过标准 CSS 分页媒体写法控制，灵活且直观，不同文档类型可以配置不同样式，一套模板体系覆盖全部正式文档，管理起来非常省心，公司模板库统一维护，各团队直接引用，版本一致不出错。

代码示例：@page 实现页眉页脚与页码

@top-center 定义页眉内容，@bottom-center 定义页脚内容；counter(page) 表示当前页码，counter(pages) 表示总页数，组合起来就是标准的“第 X 页 / 共 Y 页”格式，客户熟悉的排版，一眼就能定位页码，阅读效率高，长文档翻阅时也能快速知道自己在文档的哪个位置，体验更友好。

页眉页脚在每一页自动重复出现，页码随分页自动递增，全程不需要任何逐页处理的代码，多页文档也能保证每一页信息完整，页码从不出错，再长的报告也不用担心页码对不上，归档整理特别省心，交付前也无需逐页人工检查页码。

页边距要为页眉页脚留出空间：上边距包含页眉高度，下边距包含页脚高度，正文在内容区排版，不会与页眉页脚重叠；边距设得太小会导致页眉页脚贴边，注意留足余量，排版才舒展，观感也更好，页眉页脚与正文的间距建议至少留 10mm，视觉上更透气。

import { DomPDF } from 'dompdf.js';

const html = `
  <style>
    @page {
      size: A4;
      margin: 25mm 20mm 30mm 20mm;
      @top-center { content: "项目周报 · 2026 年第 33 周"; }
      @bottom-center { content: "第 " counter(page) " 页 / 共 " counter(pages) " 页"; }
    }
  </style>
  <h1>项目周报</h1>
  <p>本周进展：核心模块完成联调，进入回归测试阶段。</p>
  <p>风险项：第三方接口延迟，已与对方确认下周恢复。</p>`;

const pdf = new DomPDF();
pdf.addPage(html, { format: 'A4', margin: '20mm' });
pdf.save('weekly-report.pdf');

页码格式与个性化设置

页码格式可以自由组合：纯数字、带前缀（Page 1）、带分隔符（1/8）、左右对称布局等，content 属性里怎么写，PDF 里就怎么呈现，满足不同文档的排版要求，中英文文档都能适配，国际化项目也够用，改格式只动一行配置。

页眉可以放图片（如公司 logo 的 data URL 或线上地址），与文字混排，适合品牌化的正式文档；图片嵌入保持矢量清晰，不模糊，品牌形象完整呈现，客户对文档的专业度评价更高，品牌露出更自然，页眉放 logo、页脚放版权信息，品牌感更强，客户记忆点更清晰。

多页文档建议统一使用同一套页眉页脚规则，配合分页控制，从第一页到最后一页风格一致，阅读体验连贯，归档也更专业，客户查阅时观感统一，不会出现前后页风格跳变的情况，整体质感在线，多部门、多项目的文档放到一起也整齐划一，品牌形象统一。

封面与特殊页面处理

正式报告通常第一页是封面，封面一般不显示页眉页脚和页码；dompdf.js 提供排除机制，可以指定页面跳过页眉页脚，满足正式文档的排版惯例，封面保持简洁大气，重点信息一目了然，第一印象更好，客户打开文档的第一页就是封面，封面的干净程度直接影响对整份文档专业度的判断，细节不要忽视。

封面可以单独排版成一个页面：先 addPage 封面、再 addPage 正文，正文页的页码从 1 开始计数，符合读者的阅读习惯，也方便后续引用页码，招标文件、研究报告这类场景尤其需要，规范程度直接影响中标印象，正文页码从 1 开始、封面干净无页码，评审专家翻阅体验更好。

目录页、附录页等特殊页面也可以按需处理；先规划好文档结构，再决定哪些页面显示页眉页脚，结构清晰、控制精确，整套文档的排版逻辑一目了然，交付时观感专业统一，评审和验收都更顺利。

常见问题

Q: 页眉页脚里的中文显示正常吗？A: 正常，内置思源黑体，页眉页脚中的中文与正文一样清晰，公司名、文档标题都不会乱码，正式文档放心使用，不需要额外配置字体，页眉页脚中的中文与正文保持一致，交付放心。

Q: 页码能不从第 1 页开始吗？A: 可以，通过分页与排除机制配合，让正文从指定页开始计数，封面和目录不计入页码，符合正式文档规范，投标文件常用，实现起来也很简单，配置一次长期复用，多套模板可以分别配置不同的页码起始规则，互不影响。

Q: 页眉可以放动态数据吗？A: 可以，模板字符串拼接即可：文档标题、日期、项目名等动态内容在生成时填充，一套模板适配不同文档，批量生成也能自动带上各自信息，效率非常高，运营同学也能自助使用，改个日期、换个项目名就能复用，效率很高。