本文介绍在调用 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 < styleSheets.length && i < originalMedia.length; i++) {
if (styleSheets[i].media) {
styleSheets[i].media.mediaText = originalMedia[i];
}
}
return height;
}
// 使用示例（建议在 beforeprint 中调用，或打印前主动触发）
window.addEventListener('beforeprint', () => {
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）或使用 CSScounter-reset/counter-increment实现原生页码。 -
现代替代方案：对于复杂打印需求（如多栏、浮动页眉），推荐使用
window.matchMedia('print').matches监听 +@media print { body::before { content: "Page " counter(page); } }配合 CSS 计数器，而非手动计算高度。
综上，获取“打印就绪高度”的本质，是在 DOM 层面精确模拟打印样式环境并测量。虽然无法 100% 复现最终 PDF 渲染（因涉及底层排版引擎），但上述方法已在 Chrome、Edge、Firefox 中验证有效，是目前最可靠、零依赖的前端实践方案。
