使用设置 domLayout 打印网格答案

【问题标题】：Print grid with setting domLayout使用设置 domLayout 打印网格
【发布时间】：2023-03-04 23:23:02
【问题描述】：

我正在尝试打印网格，但无法识别 setDomLayout() 方法。这是我的 html ：

<div class="ui-g-12 ui-g-nopad print" [ngStyle]="style">
    ag-grid-angular #grid id="grid-printable"
        style="width: 100%; height: 100%;" 
        class="ag-theme-blue grid-printable"
        (gridReady)="onGridReady(grid)"
        [rowData]="rowData"
        [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

我的 ts 打印函数看起来像：

print(grid) {
    // Set the A4 width
    this.style = {width: '29cm',height: '100%'};
    this.gridOptions.api.setDomLayout('print);
    // Remove focus cursor
    this.gridOptions.api.clearFocusedCell();
    // Print
    window.focus();
    window.print();
    // When the print popin closes :
    this.style = {width: '100%',height: '100%'};
}

我在组件中添加了一些媒体查询，以便仅在打印时显示网格。

效果还不错，但我不能使用 ag-grid api 方法将布局设置为打印模式，我不明白为什么？

这是我尝试在我的代码https://plnkr.co/edit/?p=preview 中重现的 plunker。在我的代码中不可能有相同的行为。我尝试过同样的方法：

const eGridDiv = document.querySelector('.grid-printable');
eGridDiv.style.width = '';
eGridDiv.style.height = '';
this.gridApi.setDomLayout('print');

但出现以下错误：

ERROR in 
src/app/components/list/list.component.ts(190,14): error TS2339: Property 'style' does not exist on type 'Element'.
src/app/dossiers/list/list.component.ts(191,14): error TS2339: Property 'style' does not exist on type 'Element'.

如果我评论引起这些错误的行，我有以下 javascript error this.gridApi.setDomLayout is not a function

【问题讨论】：

标签： angular printing ag-grid

【解决方案1】：

可能是因为setDomLayout('print);- 忘记了一个引号 (')，或者它只是糟糕的复制粘贴？如果是这样 - 请提供 plnkr 样本

【讨论】：

在 plnkr - 要获得直接链接，请单击“保存”或“分叉”，然后发布此链接
所以 - 这个来自官方演示的 plnkr，我应该在这里得到什么“错误”？或者这个样本有什么问题？

【解决方案2】：

将您的eGridDiv 转换为：

const eGridDiv = document.querySelector('.grid-printable') as HTMLElement;

这将修复属性“样式”不存在于类型“元素”错误。

【讨论】：