Chrome 72打印时能否用CSS3/2添加页码？求可行方案

兄弟，我太懂你这种折腾到崩溃的感觉了——你试过的那些Stack Overflow方案我也碰过，在Chrome 72.0.3626.81（64位官方版）里，原生CSS确实搞不定打印页码，不是你代码写得有问题，是Chromium本身的bug在作祟。

先给你理清楚现状 #

• 你提到的Firefox可用方案（用表格布局配合计数器），在Chrome里会出现所有页面都显示页码1的问题，这是因为Chromium存在计数器无法逐页递增的已知问题，至今在这个版本里还没修复。
• 另一个用@page配合margin boxes（比如@bottom-right）的方案，Chrome 72确实不支持——早在2015年就有人指出这类margin boxes在主流浏览器里没被支持，到这个版本依然没改善，虽然分页媒体的page-break-after这类属性能正常工作，但margin boxes就是无法生效。

你提到的两个方案代码 #

Firefox可用的表格布局方案

<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
</head> 
<style type="text/css"> 
#content { display: table; } 
#pageFooter { display: table-footer-group; } 
#pageFooter:after { counter-increment: page; content: counter(page); } 
</style> 
<body> 
  <div id="content"> 
    <div id="pageFooter">Page </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p> 
  </div> 
</body> 
</html>

不被Chrome支持的@page方案

@page { 
  @bottom-right { 
    content: counter(page) " of " counter(pages); 
  } 
}

各浏览器表现对比 #

• Chrome、Edge：所有页面都显示 Page: 1
• Firefox：页码正常逐页递增（Page: 1、Page: 2...）
• Safari：仅在第二页顶部显示一次 Page: 1

可行的Workaround（仅限Chrome 72） #

既然原生CSS走不通，只能用JavaScript来模拟实现，思路是打印前计算内容的分页数量，然后手动在每页末尾插入固定定位的页码元素，打印完成后再清理掉这些元素。给你一个简化的示例：

// 打印前添加页码
function addPrintPageNumbers() {
  const content = document.getElementById('content');
  // 这里需要根据你的打印纸张尺寸调整页面高度，示例用窗口高度替代
  const printPageHeight = window.innerHeight * 0.9; // 预留边距
  const contentHeight = content.offsetHeight;
  const totalPages = Math.ceil(contentHeight / printPageHeight);

  // 从第二页开始插入页码和分页符
  for (let i = 1; i < totalPages; i++) {
    const pageBreakWrapper = document.createElement('div');
    pageBreakWrapper.style.pageBreakAfter = 'always';
    
    const pageNumber = document.createElement('div');
    pageNumber.style.position = 'fixed';
    pageNumber.style.bottom = '15px';
    pageNumber.style.right = '20px';
    pageNumber.textContent = `Page ${i + 1}`;
    
    pageBreakWrapper.appendChild(pageNumber);
    content.appendChild(pageBreakWrapper);
  }
}

// 打印完成后清理插入的元素
function removePrintPageNumbers() {
  const insertedElements = document.querySelectorAll('[style*="pageBreakAfter"]');
  insertedElements.forEach(el => el.remove());
}

// 绑定打印事件
window.addEventListener('beforeprint', addPrintPageNumbers);
window.addEventListener('afterprint', removePrintPageNumbers);

注意：这个方案需要根据你实际的页面布局、打印纸张大小调整高度计算逻辑，可能存在小误差，但这是Chrome 72里能实现打印页码的唯一可行办法了。

内容的提问来源于stack exchange，提问作者Loda Kuza