J'utilise une ag-grid dans une application Angular de 11 colonnes de large. Lors du redimensionnement du navigateur, j'appelle gridOptions.api.sizeColumnsToFit pour permettre l'échelle des largeurs de colonnes, ce qui permet à la grille de remplir dynamiquement la largeur du navigateur. Dans Chrome, lorsque j'appuie sur 'Ctrl + P' pour voir l'aperçu avant impression, il apparaît que la grille est rendue dans l'aperçu avec la même largeur que dans le navigateur, parfois inférieure à la largeur d'un page imprimée (produirait des colonnes qui sont écrasées ensemble inutilement), ou plus grande que la largeur d'une page imprimée (où les colonnes sont perdues et les données sont manquantes).Comment définir dynamiquement la largeur de la grille d'agrafe pour l'impression
J'ai essayé d'utiliser window.matchMedia("print") pour essayer d'appeler l'API gridOptions avant que l'aperçu avant impression soit rendu, mais cela ne fonctionne pas. La largeur de la grille est toujours la même que dans le navigateur avant l'impression.
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();
}
});
Je ne comprends pas pourquoi cela ne fonctionne pas. Dans Angular 2, quelle est la méthode recommandée pour redimensionner une ag-grid afin qu'elle s'adapte dynamiquement à la largeur d'une page imprimée?