使用设置 domLayout 打印网格

Question

我正在尝试打印网格，但无法识别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 方法在打印模式下设置布局，我不明白为什么？

---

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

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'.

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

Answer 1

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

Answer 2

将eGridDiv类型转换为：

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

这将修复类型"元素"错误上不存在属性"样式"。