Chrome/Edge 117+纵向打印预览截断HTML报表问题求助

问题背景 #

基于Java的Web应用中，采用absolute position布局的HTML报表，在Chrome/Edge 117及以上版本的纵向（Portrait）打印预览时，右侧部分列被截断；横向（Landscape）模式正常，Firefox下无此问题，117版本前功能正常。

CSS修复方案 #

1. 调整打印时的绝对布局容器约束 #

Chrome 117+对打印场景下的绝对定位元素尺寸计算逻辑有变更，可通过打印媒体查询强制适配纸张宽度：

@media print and (orientation: portrait) {
  .report-container { /* 替换为你的报表绝对定位容器类名 */
    position: relative !important; /* 临时切换为相对定位，让浏览器自动适配 */
    width: 100% !important;
    max-width: 210mm !important; /* A4纵向纸张宽度，按需调整 */
    left: 0 !important;
    transform: none !important;
  }
}

若必须保留绝对定位，可尝试用right: 0让容器自动填充可用空间：

@media print and (orientation: portrait) {
  .report-container {
    right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;
  }
}

2. 优化表格打印适配 #

针对报表核心的HTML表格，强制其适配打印纸张：

@media print and (orientation: portrait) {
  .report-table { /* 替换为你的报表表格类名 */
    width: 100% !important;
    table-layout: fixed !important; /* 固定布局避免列宽溢出 */
    transform: scale(0.9); /* 按需微调缩放比例，确保内容完整 */
    transform-origin: top left;
  }
}

若允许表格拆分，可给外层容器添加滚动适配：

@media print and (orientation: portrait) {
  .table-wrapper { /* 表格外层容器 */
    overflow-x: auto !important;
    width: 100% !important;
  }
}

3. 禁用Chrome默认打印缩放优化 #

Chrome 117+新增的自动缩放逻辑可能导致布局异常，可通过CSS禁用：

@media print {
  @page {
    size: auto !important;
    margin: 10mm !important; /* 明确页边距，避免浏览器自动调整 */
  }
  body {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    zoom: 1 !important;
  }
}

4. 调整嵌套层级定位 #

若报表容器嵌套在其他绝对定位元素内，可能导致尺寸计算错误，可将外层父容器改为相对定位：

@media print and (orientation: portrait) {
  .outer-container { /* 报表的外层父容器 */
    position: relative !important;
    width: 100% !important;
  }
}

非CSS临时方案 #

• 在Chrome/Edge打印预览的「更多设置」中，调整「缩放」为自定义比例（如90%），直到内容完整显示
• 暂时回退到Chrome/Edge 116版本，等待官方修复该打印布局bug

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