Chrome 117更新引发打印布局异常，寻求修复建议

临时快速规避方案 #

• 打开打印预览后，进入「更多设置」，将缩放改为「自定义」并设置为90%-95%，多数场景下可快速缓解内容重叠问题。
• 使用「另存为PDF」时，务必勾选「背景图形」选项，避免背景色、边框等样式丢失。

CSS针对性修复（针对数据表场景） #

针对打印时的表格渲染问题，可在页面样式中添加打印媒体查询：

1. 强制固定表格布局，防止列宽自动错乱：

@media print {
  table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  th, td {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

2. 避免表格行/单元格在分页时被截断：

@media print {
  tr, td, th {
    page-break-inside: avoid !important;
  }
}

3. 重置打印页面边距，覆盖Chrome 117的新默认样式：

@media print {
  @page {
    margin: 0.5cm !important; /* 可根据实际需求调整 */
  }
  body {
    margin: 0 !important;
  }
}

浏览器设置调整 #

• 在Chrome地址栏输入chrome://flags/#enable-experimental-web-platform-features，将该实验特性设置为Disabled，重启浏览器后测试打印效果（部分用户反馈该特性导致打印布局异常）。
• 重置打印配置：进入打印预览→更多设置→点击「重置」按钮，恢复默认后重新调整参数。

其他排查方向 #

• 检查页面中使用position: absolute或float的元素，这类元素在Chrome 117打印时易出现重叠，建议在@media print中重置为position: relative或清除浮动。
• 临时禁用所有浏览器扩展，排查是否有扩展干扰打印渲染。

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