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方法在打印模式下设置布局，我也不明白为什么？

这里是我尝试在代码https://plnkr.co/edit/?p=preview中重现的pl子。在我的代码中不可能有相同的行为。我已经尝试过相同的行：

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

Answer 1

Might be cuz of it setDomLayout('print);- forgot one quotation mark ('), or its just bad copy-paste? If so - pls provide plnkr sample

Answer 2

将您的eGridDiv键入为：

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

这将解决类型为“元素”错误时属性“样式”不存在的问题。

使用设置domLayout打印网格

2 个答案: