无论如何都没有打印任何完全适合 A4 纸的 ag-grid 尺寸吗？答案

【问题标题】：Isn't there anyway to print any ag-grid size compeletely fit into A4 paper?无论如何都没有打印任何完全适合 A4 纸的 ag-grid 尺寸吗？
【发布时间】：2021-05-08 17:35:31
【问题描述】：

我有一个很大的 ag-grid，如下所示

我应该以某种方式将其导出为 PDF 并能够打印（均为 A4 纸张大小）。我查看了 AG-Grid 文档以在此处找到我在下面提出的有用信息

 onBtPrinterFriendly() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '';
    eGridDiv.style.height = '';
    this.gridApi.setDomLayout('print');
    print();
  }
  onBtNormal() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '400px';
    eGridDiv.style.height = '200px';
    this.gridApi.setDomLayout(null);
  }

这两种方法可以改变网格大小以打印所需的格式。但我不能让我的网格对角线更小以适应纸张大小。它只是裁剪我的网格的右侧，所以看起来像这样

不管它有多小，只是我想把它完全放在 A4 纸上（垂直）。反正没有实现这一点吗？我也在考虑制作一个没有边距和填充的简单 HTML 表格版本适合纸张，但工作量太大，因此如果存在，请寻找更好、更简单的方法。

Plunker 示例：https://plnkr.co/edit/rVPswsaknukOkhf5

【问题讨论】：

标签： javascript html css angular ag-grid

【解决方案1】：

使用网格 API 上的 sizeColumnsToFit 函数来适应网格中的所有列，然后打印。

onBtPrinterFriendly() {
    var eGridDiv = document.querySelector('#myGrid');
    eGridDiv.style.width = '';
    eGridDiv.style.height = '';
    this.gridApi.sizeColumnsToFit();
    this.gridApi.setDomLayout('print');
    print();
  }

Demo.

【讨论】：

好方法。但它仍然裁剪网格的右侧。无论如何都不适合：/
它永远不会适合你的列，因为你有太多的列。如果您尝试将其纵向打印，则不应裁剪侧面。

【解决方案2】：

agGrid 行在其 css 中具有较高的 line-height 值，因此它们实际上不会自动返回到 line。在您的情况下，这将导致很多省略号和更难阅读和打印的表格。

在打印时（如果您在其他地方不需要它），您可以通过 defaultColDef 将类添加到所有单元格，这将强制单元格至少获取 2 行数据。这样你可以减少列的宽度。

defaultColDef: {
        ....

        cellClass: 'cell-wrap-text',
       
        ....
}

.cell-wrap-text{
  white-space: normal !important;
  line-height: 23px !important;
}

使用它和sizeColumnsToFit() 和setDomLayout('print') 方法会给你一个更好的结果。

此外，如果您没有在 agGrid 上使用无限模式，您可以轻松地将行高设置为固定值，或者通过 API 以编程方式执行此操作（基于该行单元格内的文本内容）。

【讨论】：