如何動態設置用於打印的Ag-grid的寬度

Question

我在11列寬的Angular應用程序中使用Ag-grid。在調整瀏覽器大小時，我打電話給gridOptions.api.sizeColumnsToFit以允許調整列寬，使網格動態地填充瀏覽器的寬度。

在Chrome中，當我按下'Ctrl + P'來查看打印預覽時，看起來網格在預覽中呈現的寬度與它在瀏覽器中的寬度相同，有時小於寬度打印頁面（會產生不必要的壓縮在一起的列），或者大於打印頁面的寬度（列丟失和數據丟失）。

我曾嘗試使用window.matchMedia("print")嘗試打印預覽呈現之前調用gridOptions API，但這是行不通的。在打印被調用之前，網格寬度與瀏覽器中的寬度相同。

this.printMediaQuery = window.matchMedia("print"); 
this.printMediaQuery.addListener(() => { 
    if (!this.gridOptions.api) { return; } 
    if (this.printMediaQuery.matches) { 
     //I want to hide one column of data 
     this.gridOptions.columnApi.setColumnVisible("Reopen", false); 
     this.gridOptions.api.sizeColumnsToFit(); 
    } else { 
     //I want to reshow the same column of data 
     this.gridOptions.columnApi.setColumnVisible("Reopen", true); 
     this.gridOptions.api.sizeColumnsToFit(); 
    } 
}); 

我不明白爲什麼這不起作用。在Angular 2中，推薦調整ag-grid的大小以使其動態適合打印頁面的寬度？

Answer 1

我建議利用打印佈局，網格提供本身 - 尤其是你需要設置domLayout屬性爲true

請參閱該文檔爲解決此瞭解更多信息：https://www.ag-grid.com/javascript-grid-for-print/