Question

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

在Chrome中，当我按下Ctrl + P＆＃39;要查看打印预览，看起来网格在预览中呈现的宽度与浏览器中的宽度相同，有时小于打印页面的宽度（会产生不必要地挤压在一起的列），或者更大比打印页面的宽度（列丢失和数据丢失）。

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

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大小的方法是什么，以便动态地适应打印页面的宽度？

Answer 1

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

有关详细信息，请参阅文档：https://www.ag-grid.com/javascript-grid-for-print/

如何动态设置ag-grid的宽度以进行打印

1 个答案: