Chrome升级至108.0.5359.95后window.print()异常：表格跳页求助

针对Chrome升级到108.0.5359.95后，window.print()打印时表格跳转到新页面、表格前出现分页的问题，你可以尝试以下几种修复方案：

• 扩展CSS分页规则到父容器及前置元素
  单一给表格添加分页避免规则可能不够，父容器或表格前的元素可能触发分页。补充以下CSS：

  /* 给表格父容器添加规则 */
  .report-parent {
    page-break-before: avoid !important;
    page-break-after: avoid !important;
  }
  /* 给表格前的元素添加规则，防止其后面分页 */
  .element-before-report {
    page-break-after: avoid !important;
  }
  .report {
    margin: 0 !important;
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }
  

• 在打印媒体查询中全局调整样式
  针对打印场景重置全局样式，消除默认边距和可能的分页触发点：

  @media print {
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      height: auto !important;
      overflow: visible !important;
    }
    .report {
      page-break-before: avoid !important;
      page-break-inside: avoid !important;
      page-break-after: avoid !important;
      margin: 0 !important;
    }
    /* 禁用其他元素的强制分页 */
    * {
      page-break-before: auto !important;
      page-break-after: auto !important;
    }
  }
  

• 调用打印前触发元素重绘
  Chrome新版本的渲染缓存可能导致样式未生效，打印前强制重绘表格：

  const reportEl = document.querySelector('.report');
  // 触发重绘
  reportEl.style.display = 'none';
  void reportEl.offsetHeight; // 强制浏览器计算布局
  reportEl.style.display = '';
  // 执行打印
  window.print();
  

这些方案可以组合使用，覆盖Chrome 108版本打印渲染的特殊规则，解决表格分页异常问题。

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