【问题标题】:Ag-grid is not responsive in PRINT format on full screen(s)Ag-grid 在全屏上以 PRINT 格式不响应
【发布时间】:2020-06-12 07:01:06
【问题描述】:

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

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

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


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-09-21
      • 2014-06-26
      • 2018-06-04
      • 2020-06-22
      • 2021-04-24
      • 1970-01-01
      • 2018-10-09
      • 2020-04-27
      相关资源
      最近更新 更多