如何准确获取打印就绪文档的实际高度（适配 media=‘print’ 样式）-html教程-PHP中文网

如何准确获取打印就绪文档的实际高度（适配 media='print' 样式）

本文介绍在调用 window.print() 前，如何可靠获取应用了 @media print 样式后的文档真实渲染高度，解决因分页、页边距、A4尺寸等导致的 scrollHeight 误判问题。

本文介绍在调用 `window.print()` 前，如何可靠获取应用了 `@media print` 样式后的文档真实渲染高度，解决因分页、页边距、a4尺寸等导致的 `scrollheight` 误判问题。

在 Web 打印场景中，开发者常需动态计算打印总页数（例如添加页眉/页脚、页码），而关键前提是：必须基于打印媒体（media='print'）下的真实布局尺寸进行测量。但默认情况下，document.body.scrollHeight 或 document.documentElement.scrollHeight 返回的是当前屏幕样式（media='screen'）下的滚动高度——它忽略 @page 规则、page-break-* 属性、打印专用 margin 和 size 等关键样式，导致计算结果严重偏低。

遗憾的是，浏览器不提供直接读取“打印预览渲染树”的 API，也无法在 beforeprint 事件中获取最终 PDF 页面的像素高度（该高度由打印机驱动或 PDF 生成器决定，非 DOM 可见）。因此，我们必须采用一种可预测、可复现、与打印样式强同步的模拟策略：

✅ 正确做法：强制切换媒体类型 + 强制重排 + 安全测量

function getPrintDocumentHeight() {
  // 1. 临时将所有样式表的 media 切换为 'print'
  const styleSheets = Array.from(document.styleSheets);
  const originalMedia = [];

  for (const sheet of styleSheets) {
    if (sheet.media && sheet.media.length > 0) {
      originalMedia.push(sheet.media.mediaText);
      sheet.media.mediaText = 'print';
    }
  }

  // 2. 强制触发重排（确保 print 样式生效）
  document.documentElement.offsetHeight; // 触发 layout flush

  // 3. 获取应用 print 样式后的实际高度（推荐使用 documentElement）
  const height = document.documentElement.scrollHeight;

  // 4. 恢复原始 media 类型（避免影响页面交互）
  for (let i = 0; i  {
  const printHeight = getPrintDocumentHeight();
  console.log('Estimated print-ready height:', printHeight, 'px');
  // 结合 A4 高度（如 842px @ 96dpi）计算页数：
  const a4HeightPx = 842; // 对应 210mm × 297mm @ 96 DPI
  const pageCount = Math.ceil(printHeight / a4HeightPx);
  console.log('Estimated page count:', pageCount);
});

⚠️ 关键注意事项

document.documentElement.scrollHeight 优于 document.body.scrollHeight：元素是根容器，其 scrollHeight 更稳定地反映整个文档盒模型高度（尤其当有 margin collapse 或未设 height 时）。
@page 规则不可通过 JS 查询：@page { size: A4; margin: 1cm; } 的效果无法用 getComputedStyle() 读取，但会切实影响 scrollHeight —— 因此必须先激活 media='print'。
避免在 afterprint 中测量：此时样式已恢复，且页面可能已被冻结或重绘，结果不可靠。
DPI 与单位转换需谨慎：CSS 中 1in = 96px 是标准参考值，但实际打印输出受系统 DPI 设置、浏览器缩放、PDF 导出工具影响。若需高精度页数，建议结合服务端渲染（如 Puppeteer）或使用 CSS counter-reset / counter-increment 实现原生页码。
现代替代方案：对于复杂打印需求（如多栏、浮动页眉），推荐使用 window.matchMedia('print').matches 监听 + @media print { body::before { content: "Page " counter(page); } } 配合 CSS 计数器，而非手动计算高度。