【发布时间】:2020-06-12 07:01:06
【问题描述】:
ag-grid 中有一个内置函数来处理基于屏幕尺寸(主要是宽度)的响应性,称为 gridApi.sizeColumnsToFit(),它根据所提到的宽度比例适合所有列。但是如果我们尝试打印,同样的事情就不会发生。
我尝试过但不起作用的方法:
- 尝试在
windows.onBeforePrint函数上调用gridApi.sizeColumnsToFit()。 - 尝试对
windows.print()使用超时,以便重新渲染 ag-grid。 - 尝试使用以上两件事执行
windows.resizeTo(),但由于它不支持新的浏览器,或者仅当您使用windows.open()打开窗口然后使用它时才有效。 - 尝试在
@media printcss 上设置 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
【问题讨论】:
标签: javascript html angular ag-grid ag-grid-angular