У меня проблема с Angular Material и Media Print, когда я использую window.print (); страница для печати не перерисовывается, например, в таблицах показаны полосы прокрутки, как мне ждать окончания перерисовки? мой код прост:
Print() {
window.print();
}
это внутри компонента.
на моем scss у меня есть носитель для печати:
@media print {
body,
html {
transition: none !important;
* {
transition: none !important;
}
}
.noprinted {
display: none !important;
}
.mat-sidenav-content {
margin: 10px !important;
}
.flatprint {
box-shadow: none !important;
}
.mat-drawer-container {
background-color: white !important;
}
.closeButton {
display: none !important;
}
}
мой шаблон такой:
<div style="position:relative">
<mat-card [ngClass]="getColor()" class="mat-elevation-z10 flatprint">
<mat-card-header>
<div *ngIf="Icono" mat-card-avatar fxFlex="60px" fxLayoutAlign="center center">
<ng-container *ngIf="HasFontawesomeIcon">
<fa-icon [icon]="['fas', Icono]" size="3x"></fa-icon>
</ng-container>
<ng-container *ngIf="!HasFontawesomeIcon">
<mat-icon class="icon-large">{{Icono}}</mat-icon>
</ng-container>
</div>
<mat-card-title>{{Titulo}}</mat-card-title>
<mat-card-subtitle>{{Descripcion}}</mat-card-subtitle>
<div class="mat-card-action-button-1" fxLayout="row wrap" fxLayoutGap="10px">
<button *ngIf="ShowAdd" mat-mini-fab class="bg noprinted" [ngClass]="addBtnClass" (click)="clickAdd()">
<mat-icon>add</mat-icon>
</button>
<button *ngIf="ShowPrint" mat-mini-fab class="bg noprinted" [ngClass]="addBtnClass" (click)="Print()">
<mat-icon>print</mat-icon>
</button>
<button *ngIf="ShowMore" mat-mini-fab class="bg noprinted" [ngClass]="addBtnClass" (click)="openBottomSheet()">
<mat-icon>more_horiz</mat-icon>
</button>
</div>
<span class="relleno"></span>
<ng-content select="[my-card-header]"></ng-content>
</mat-card-header>
<ng-content select="[my-card-body]"></ng-content>
<mat-card-content style="overflow: auto;">
<ng-content select="[my-card-content]"></ng-content>
</mat-card-content>
<mat-card-footer #myCardFooter [ngClass]="{'hideElement':!showFooter}">
<ng-content select="[my-card-footer]"></ng-content>
</mat-card-footer>
</mat-card>
</div>
это результат, часть подсветки показывает полосу прокрутки, но я использую fxFlex = "100%", поэтому я не ожидаю увидеть полосы прокрутки: