Ag-grid 在全屏上以 PRINT 格式不响应

Posted 2023-03-28

【中文标题】Ag-grid 在全屏上以 PRINT 格式不响应

【英文标题】：Ag-grid is not responsive in PRINT format on full screen(s)

【发布时间】：2020-06-12 07:01:06

【问题描述】：

ag-grid 中有一个内置函数来处理基于屏幕尺寸（主要是宽度）的响应性，称为 gridApi.sizeColumnsToFit()，它根据所提到的宽度比例适合所有列。但是如果我们尝试打印，同样的事情就不会发生。

我尝试过但不起作用的方法：

尝试在 windows.onBeforePrint 函数上调用 gridApi.sizeColumnsToFit()。 尝试对 windows.print() 使用超时，以便重新渲染 ag-grid。 尝试使用以上两件事执行windows.resizeTo()，但由于它不支持新的浏览器，或者仅当您使用windows.open() 打开窗口然后使用它时才有效。 尝试在@media print css 上设置 ag-grid 容器的宽度，但仍然无法正常工作，因为它不会重新渲染表格。 尝试让表格在打印前无响应，以便我们可以根据打印宽度为列提供适当的宽度，但没有此功能可以撤消 gridApi.sizeColumnsToFit()。

这是我在 ag-grid gitHub 页面上提供的相同问题的 sn-p。 链接：https://github.com/ag-grid/ag-grid/issues/3689

创建了一个应该复制问题的示例，

Plunker 链接：https://next.plnkr.co/edit/6TIdd8Vzi3121G5E

在 plunker 中，转到预览侧，单击在单独的窗口中打开预览按钮，该按钮位于预览的右上角。然后点击打印按钮。

这里有一个预览链接，如果可以的话：https://run.plnkr.co/preview/ck71wblt7000c3b69k4ho00cl/

当前行为： 所有列在打印中不可见（但在 UI 中可见）。如果列数较大或屏幕分辨率较大（即 1080p 及以上），则差异更加明显。

预期行为： 与 UI 中的相同，ag-grid 也应该在打印中响应，它不应该只是复制 DOM 中的内容并打印适合打印区域的任何内容。单击打印时，它应该以打印格式响应，或者应该有一些功能，我们可以自己提供所有列的特定宽度。 （例如，像 gridApi.sizeColumnsToFit() 这样的函数应该在打印上工作）

环境：Windows 10、Visual Studio Code

ag-Grid 版本： ^19.1.2 浏览器：Chrome、Mozilla

语言：Angular 4+、TypeScript / javascript、html5

【参考方案1】：

如果＃5（使网格“无响应”并为打印设置适当的列宽）对您来说可以在打印时获得所需的内容，那么您 如果您想要的是 columnDefs 中定义的网格状态，则可以通过调用 columnApi.resetColumnState() 来“撤消”，或者您可以在将它们设置为打印模式之前保存列大小（参见 columnApi.getColumnState()），然后将它们设置回来之后再改成这些值。