如何自定义网页打印时的默认浏览器页脚位置

在浏览器中直接调用打印功能时，系统默认会在每一页的底部生成页脚，通常左侧是当前页面的网址，右侧是页码与打印时间。很多业务系统希望把这些信息挪到指定位置，或者改成公司名称与单据编号。由于页脚由浏览器内核绘制，并不属于文档流的一部分，因此常规的排版手段无法直接选中它。要实现自定义效果，需要从打印样式、页面边距以及内容重绘三个层面入手。

理解浏览器默认页脚的生成机制

当我们按下 Ctrl+P 或执行 window.print() 时，浏览器会进入打印渲染模式。此时渲染引擎会先根据 @page 规则计算纸张尺寸与页边距，然后在页面内容之外保留一块区域用于绘制页眉和页脚。Chrome、Edge 等基于 Chromium 的浏览器，将页脚固定在物理纸张底边，内容来自地址栏网址与打印参数，网页脚本在这一阶段没有 DOM 接口可以修改。

这种机制意味着，如果想让页脚出现在距离纸张底部三厘米的位置，而不是紧贴边缘，单纯设置 body 的 margin-bottom 是无效的。因为 body 的边距只影响文档内容，不影响浏览器自绘区域。只有使用 @page 的 margin 属性，才能把可打印区域缩小，从而让默认页脚相对内容上移或下沉。

不同浏览器对待默认页脚的策略也有差异。Firefox 允许用户在打印对话框中取消页脚勾选，而 Chromium 系浏览器在对话框中同样提供了页眉页脚开关，但默认开启。如果目标用户群体固定使用某款浏览器，可以引导他们在打印设置里关闭系统页脚，再由网页自己绘制所需信息。但对于公开网站，不能假设用户会手动调整，因此需要用样式方案兜底。

使用 @page 与 margin 间接调整页脚空间

CSS 的 @page 规则是控制打印分页与边距的标准方式。通过为页面设置较大的下边距，可以压缩浏览器绘制默认页脚的物理空间，使其看起来离内容更远。下面的代码将每页下边距设为 2cm，上、左、右设为 1cm，这样正文区域底部与纸张底边的空白增加，系统页脚就被推到更靠下的位置。

@page {
  size: A4;
  margin: 1cm 1cm 2cm 1cm;
}

@media print {
  body {
    font-size: 12pt;
  }
}

这种方式的优点是纯样式实现，不需要 JavaScript 干预，也不会破坏原有页面结构。缺点是它只能改变页脚与内容的间距，不能更改页脚显示的文字。如果业务要求页脚显示“内部单据 第X页 共Y页”，仍然需要自己在页面里写元素。

进一步可以结合 position: fixed 在打印样式中放置自定义底栏。固定定位元素在打印时每一页都会重复出现，把它放在 bottom 为 1.5cm 的位置，就能在视觉上覆盖系统页脚上方，形成自定义页脚的效果。注意打印下的固定定位受 @page margin 影响，需要反复测试避免重叠。

<style>
@media print {
  .my-footer {
    position: fixed;
    bottom: 1.5cm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10pt;
  }
}
</style>
<div class="my-footer">内部单据 第1页 共3页</div>

通过打印样式表与脚本完全接管页脚内容

当默认页脚的文字完全不符合需求时，可以考虑彻底隐藏系统页脚并自行绘制。Chromium 浏览器在打印对话框里有关闭页脚的选项，但网页无法代用户勾选。可行的办法是在页面中预埋打印专用容器，平时 display:none，打印时显示，并利用分页符控制每页底部都渲染该容器。

下面的脚本在打印前动态计算页数并填充自定义页脚，打印结束后恢复。虽然不能删掉浏览器自绘页脚，但可以把自绘页脚用留白掩盖，让自定义内容成为用户唯一注意到的底部信息。核心思路是放大下边距到足以容纳系统页脚，再把自定义底栏定位在系统页脚上方。

function beforePrint() {
  const footers = document.querySelectorAll('.print-foot');
  footers.forEach(function(el) {
    el.style.display = 'block';
  });
}

function afterPrint() {
  const footers = document.querySelectorAll('.print-foot');
  footers.forEach(function(el) {
    el.style.display = 'none';
  });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

如果项目允许使用浏览器扩展或桌面封装，还可以借由 puppeteer 等无头浏览器生成 PDF，那样就能完全脱离系统页脚限制。但对于普通 Web 页面，掌握 @page 与打印媒体查询已经能解决大部分自定义页脚位置的问题。实际落地时，建议先和用户确认浏览器类型，再选择隐藏系统页脚或叠加自定义元素的方案，避免重复内容造成单据模糊。

最后需要提醒，任何打印样式都应在真实纸张上校验。屏幕预览和物理打印常有毫米级偏差，尤其是 @page 的 margin 在部分老版本浏览器中支持不完整。建立打印调试页，逐一记录每种浏览器的表现，才能确保线上单据的页脚位置符合预期。

CSS_print@pagebrowser_print_footer修改时间：2026-08-15 11:54:27