Chrome近期更新后windows.print()失效，.NET打印页面渲染异常求助

• 检查打印样式表兼容性

  • 排查是否使用了Chrome新版本不再兼容的CSS属性（如旧版float布局、position: absolute的打印处理逻辑），替换为更稳定的布局方式。
  • 为打印样式添加明确的尺寸约束，避免自动布局导致元素重叠：

    @media print {
      .print-content {
        width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
      }
    }
    

  • 禁用Chrome的打印缩放优化，强制固定缩放比例：

    @media print {
      body {
        zoom: 1 !important;
        -webkit-print-color-adjust: exact;
      }
    }
    

• 调整打印触发逻辑

  • 确保DOM完全渲染后再调用打印，添加延迟或监听load事件：

    window.addEventListener('load', () => {
      setTimeout(() => window.print(), 500);
    });
    

  • 打印前强制触发页面重绘，解决渲染缓存导致的布局异常：

    function printPage() {
      const container = document.getElementById('print-container');
      container.classList.add('redraw-trigger');
      void container.offsetWidth; // 触发浏览器重绘
      container.classList.remove('redraw-trigger');
      window.print();
    }
    

    配套CSS：

    .redraw-trigger {
      transform: scale(1);
    }
    

• 排查.NET页面特殊渲染逻辑

  • 检查服务器端控件生成的HTML结构，部分.NET控件的输出在Chrome新版本下可能存在布局冲突，尝试替换为原生HTML元素优化渲染。
  • 确保打印前所有异步加载的内容已完全渲染，避免未加载完成的元素干扰布局。

• 调整Chrome打印设置

  • 在打印预览中开启“背景图形”选项，部分背景样式缺失会导致布局错乱。
  • 将打印缩放设置为“自定义100%”或“适应页面”，避免内容被强制压缩引发重叠。

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