打印时移除最后一页重复position:fixed固定页脚的实现方案

你的判断是对的：position: fixed定位的元素在打印场景下的多页重复显示，是浏览器打印渲染层的重复绘制行为，DOM结构中该元素仅存在一个实例，所有基于DOM结构的伪类选择器（包括:last-of-type、:last-child）都无法区分不同打印页上的同一个元素，自然没法实现仅隐藏最后一页页脚的效果。

下面给两种可直接落地的方案：

方案一：纯CSS实现（推荐，兼容现代主流浏览器） #

直接放弃position: fixed实现打印页脚的思路，改用CSS分页媒体标准原生支持的运行元素（Running Elements）能力，天生支持按页面规则控制页脚显示隐藏，不需要额外写JS，也不会出现页脚和内容重叠的问题。
代码如下：

@media print {
  .empty-footer {
    height: auto;
  }
  /* 将页脚注册为打印运行元素，移除原有fixed定位 */
  .page-footer {
    position: running(printPageFooter);
    width: 100%;
    height: auto;
  }
  /* 配置打印页基础规则，所有页面默认显示页脚 */
  @page {
    /* 底部预留足够空间放页脚，数值根据自己页脚实际高度调整，避免和正文重叠 */
    margin-bottom: 45px;
    @bottom-center {
      content: element(printPageFooter);
      margin-bottom: 5px;
    }
  }
  /* 最后一页隐藏页脚 */
  @page :last {
    @bottom-center {
      content: none;
    }
  }
}

这个方案在Chrome 118+、Edge 118+、Firefox 117+版本上都可正常运行，符合W3C打印标准，后续维护成本最低。

方案二：JS兼容实现（适配低版本内核浏览器） #

如果需要兼容不支持CSS Running Elements的旧浏览器，可以在打印触发前动态处理DOM，在每一个分页位置插入独立的页脚副本，最后一页跳过插入，打印完成后还原DOM结构即可。
对应代码：

@media print {
  .temp-print-footer {
    position: absolute;
    left: 0;
    width: 100%;
    page-break-inside: avoid;
  }
  .origin-footer-hide {
    display: none !important;
  }
}

// 监听打印前事件
window.addEventListener('beforeprint', () => {
  const originFooter = document.querySelector('.page-footer');
  const contentContainer = document.querySelector('.content-wrapper'); // 替换为实际的正文容器选择器
  if (!originFooter || !contentContainer) return;

  // 隐藏原有fixed定位的页脚
  originFooter.classList.add('origin-footer-hide');

  // 单页可打印高度，根据自己页面的@page边距、纸张尺寸调整，A4纸默认边距下约为890px
  const singlePageHeight = 890;
  const footerHeight = originFooter.offsetHeight;
  const totalHeight = contentContainer.scrollHeight;
  const totalPageCount = Math.ceil(totalHeight / singlePageHeight);

  // 除最后一页外，每个分页位置插入页脚副本
  for (let pageIndex = 1; pageIndex < totalPageCount; pageIndex++) {
    const footerCopy = originFooter.cloneNode(true);
    footerCopy.classList.add('temp-print-footer');
    // 定位到对应分页的底部位置
    footerCopy.style.top = `${pageIndex * singlePageHeight - footerHeight - 5}px`;
    contentContainer.appendChild(footerCopy);
  }
});

// 监听打印完成/取消事件，还原DOM
window.addEventListener('afterprint', () => {
  const originFooter = document.querySelector('.page-footer');
  if (originFooter) originFooter.classList.remove('origin-footer-hide');
  // 移除所有临时插入的页脚
  document.querySelectorAll('.temp-print-footer').forEach(item => item.remove());
});

注意事项 #

• 不要尝试通过z-index覆盖、DOM伪类选择器的方式处理fixed定位的打印页脚，这类方案都无法绕过“DOM中仅存在一个页脚实例”的核心限制。
• 使用纯CSS方案时，@page的margin-bottom值一定要大于页脚自身高度，否则会出现正文和页脚重叠的问题。

内容的提问来源于stack exchange，提问作者joe rodrigo