ag-Grid全屏打印无响应问题：多方案尝试无效，求解决

针对你遇到的ag-Grid在打印时无法通过gridApi.sizeColumnsToFit()适配列宽的问题，我结合实践总结了两个可行的解决方案，同时也会解释你之前尝试的方法为什么无效：

一、核心原因 #

浏览器的打印预览会创建一个独立的渲染上下文，其视口尺寸和当前页面视口不一致。sizeColumnsToFit()是基于当前页面视口计算列宽的，直接调用无法适配打印上下文的尺寸，导致打印时列显示不全。

二、可行解决方案 #

方案1：临时切换容器尺寸适配打印上下文 #

通过beforeprint和afterprint事件，临时将ag-Grid容器修改为打印媒体的尺寸，触发列宽计算后再恢复原尺寸，步骤如下：

1. 在组件中监听打印前后的事件，并保存/恢复容器尺寸：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent {
  @ViewChild('gridContainer') gridContainer: ElementRef;
  private gridApi: GridApi;
  private originalContainerStyle: CSSStyleDeclaration;

  onGridReady(params) {
    this.gridApi = params.api;
    // 保存容器初始样式
    this.originalContainerStyle = {...this.gridContainer.nativeElement.style};
    // 监听打印事件
    window.addEventListener('beforeprint', this.handleBeforePrint.bind(this));
    window.addEventListener('afterprint', this.handleAfterPrint.bind(this));
  }

  handleBeforePrint() {
    // 设置容器为打印用宽度（以A4纸为例，可根据实际需求调整）
    const printTargetWidth = '190mm'; // 减去页边距后的A4宽度
    this.gridContainer.nativeElement.style.width = printTargetWidth;
    
    // 强制grid重新计算并适配列宽
    this.gridApi.sizeColumnsToFit();
    // 触发头部和主体重绘，确保样式生效
    this.gridApi.refreshHeader();
    this.gridApi.refreshBody();
  }

  handleAfterPrint() {
    // 恢复容器初始样式
    Object.assign(this.gridContainer.nativeElement.style, this.originalContainerStyle);
    // 重新适配页面视口
    this.gridApi.sizeColumnsToFit();
  }
}

2. 模板中给ag-Grid容器添加引用：

<div #gridContainer class="ag-theme-alpine" style="width: 100%; height: 500px;">
  <ag-grid-angular
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>

方案2：CSS媒体查询兜底（备选） #

如果方案1在某些浏览器中仍有兼容性问题，可以通过打印样式强制列的最小宽度，并允许横向滚动，避免内容截断：

@media print {
  .ag-theme-alpine {
    width: 100% !important;
    overflow-x: auto !important;
    print-color-adjust: exact; /* 确保样式精准打印 */
  }
  .ag-header-cell, .ag-cell {
    min-width: 120px !important; /* 根据列内容调整最小宽度 */
    word-break: break-word; /* 长文本自动换行 */
  }
}

三、为什么你之前的尝试无效？ #

• 直接在onBeforePrint调用sizeColumnsToFit()：此时浏览器还未切换到打印视口，计算的列宽是基于页面视口的，打印时使用的是新的上下文，尺寸不匹配。
• 超时触发重渲染：打印预览的渲染时机由浏览器控制，超时时间无法精准匹配，很难赶在打印渲染前完成重绘。
• resizeTo()：现代浏览器出于安全限制，禁止修改非脚本打开窗口的尺寸，所以该方法已失效。
• 仅设置CSS容器宽度：ag-Grid的列宽是通过JavaScript计算生成的内联样式，单纯修改容器宽度不会触发ag-Grid的列宽重计算，因此无效。
• 找不到撤销sizeColumnsToFit()的方法：其实不需要撤销，只需在打印后恢复容器原尺寸并重新调用sizeColumnsToFit()，就能恢复页面的适配效果。

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