如何获取对应media='print'样式的待打印文档高度？

方法一：通过隐藏iframe模拟打印环境计算 #

创建一个隐藏的iframe容器，将当前页面内容复制进去并加载打印样式，以此模拟打印环境来获取真实高度：

function getPrintHeight() {
  return new Promise((resolve) => {
    const iframe = document.createElement('iframe');
    iframe.style.position = 'absolute';
    iframe.style.top = '-9999px';
    iframe.style.width = '100%'; // 匹配打印页面宽度
    document.body.appendChild(iframe);

    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // 复制当前页面内容
    iframeDoc.body.innerHTML = document.body.innerHTML;
    // 引入打印样式文件
    const printLink = iframeDoc.createElement('link');
    printLink.rel = 'stylesheet';
    printLink.type = 'text/css';
    printLink.media = 'print';
    printLink.href = 'print.css';
    iframeDoc.head.appendChild(printLink);

    // 等待样式加载完成后计算高度
    printLink.onload = () => {
      const height = iframeDoc.body.scrollHeight;
      document.body.removeChild(iframe);
      resolve(height);
    };
  });
}

// 使用示例
getPrintHeight().then(height => {
  console.log('打印样式下的文档高度:', height);
  // 按A4纸96dpi纵向高度（约1122px）计算页数
  const pageHeight = 1122;
  const pageCount = Math.ceil(height / pageHeight);
  console.log('总打印页数:', pageCount);
});

方法二：临时切换样式强制应用打印规则 #

临时禁用屏幕样式、强制启用打印样式，计算高度后再恢复原状态：

function getPrintHeight() {
  // 获取对应样式表元素
  const screenLink = document.querySelector('link[media="screen"]');
  const printLink = document.querySelector('link[media="print"]');

  // 临时切换样式
  screenLink.disabled = true;
  printLink.media = 'all';

  // 等待页面重绘完成后计算
  requestAnimationFrame(() => {
    const height = document.body.scrollHeight;
    // 恢复原样式设置
    screenLink.disabled = false;
    printLink.media = 'print';
    
    console.log('打印样式下的文档高度:', height);
    // 计算打印页数
    const pageHeight = 1122;
    const pageCount = Math.ceil(height / pageHeight);
    console.log('总打印页数:', pageCount);
  });
}

// 调用执行
getPrintHeight();

注意事项 #

• 方法一需确保复制的内容包含所有依赖资源（如动态生成的内容），避免高度计算偏差
• 方法二可能导致页面短暂闪烁，建议在打印触发前瞬间执行
• 打印纸张高度需根据实际dpi和纸张尺寸调整，比如A4横向96dpi下高度为794px

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