如何动态设置用于打印的 ag-grid 的宽度答案

【问题标题】：How to dynamically set width of ag-grid for print如何动态设置用于打印的 ag-grid 的宽度
【发布时间】：2018-01-05 02:33:00
【问题描述】：

我在 11 列宽的 Angular 应用程序中使用 ag-grid。在调整浏览器大小时，我调用gridOptions.api.sizeColumnsToFit 以允许列宽缩放，使网格动态填充浏览器的宽度。

在 Chrome 中，当我按“Ctrl + P”查看打印预览时，似乎在预览中呈现的网格与浏览器中的宽度相同，有时小于打印的宽度页（会产生不必要地挤在一起的列），或大于打印页的宽度（列丢失且数据丢失）。

我曾尝试使用window.matchMedia("print") 在渲染打印预览之前尝试调用 gridOptions api，但这不起作用。网格宽度与调用 print 之前在浏览器中的宽度相同。

this.printMediaQuery = window.matchMedia("print");
this.printMediaQuery.addListener(() => {
  if (!this.gridOptions.api) { return; }
  if (this.printMediaQuery.matches) {
      //I want to hide one column of data
      this.gridOptions.columnApi.setColumnVisible("Reopen", false);
      this.gridOptions.api.sizeColumnsToFit();
  } else {
      //I want to reshow the same column of data
      this.gridOptions.columnApi.setColumnVisible("Reopen", true);
      this.gridOptions.api.sizeColumnsToFit();
  }
});

我不明白为什么这不起作用。在 Angular 2 中，调整 ag-grid 大小以使其动态适应打印页面的宽度的推荐方法是什么？

【问题讨论】：

你有没有找到一个好的解决方案？我也遇到了列太多的问题，并且它扩展了页面以进行打印。我正在尝试找到一种方法来缩小它以适应。
@Kyle 不是。我不记得为什么 ag-grid 的 setDomLayout 对我们不起作用。看起来我们可能在调用 sizeColumnsToFit() 时尝试使用 Lodash 的延迟方法等待约 300 毫秒，以便打印视图有时间完全加载。然后 api 可能会将列的大小调整为新视图。但我不确定这是否成功（显然不是一个可靠的解决方案）。

标签： angular ag-grid

【解决方案1】：

我建议使用网格本身提供的打印布局 - 特别是您需要将 domLayout 属性设置为 true

有关这方面的更多信息，请参阅文档：https://www.ag-grid.com/javascript-grid-for-print/

【讨论】：