Question

我有一个Angular页面，供用户打印。然后，我在页面上还有一个大按钮，上面写着“打印”。我想做的是，当用户单击按钮时，我想隐藏该“打印”按钮，打印页面，然后再次显示该按钮。默认情况下，此ToggleForPrint变量为false。

<ng-container *ngIf="!ToggleForPrint">
  <button (click)="Print()">Print</button>
</ng-container>

....

Print() {
  this.ToggleForPrint = true;
  window.print();
  this.ToggleForPrint = false;
}

但是，这不起作用。出现打印屏幕时，打印按钮仍然存在。在this.ToggleForPrint = true;行之后，我们需要以某种方式进行刷新。

Answer 1

Print() {
  this.ToggleForPrint = true;
  window.print();
}

@HostListener('window:afterprint', ['$event'])
afterPrint() {
  this.ToggleForPrint = false;
}

这应该摆脱您的问题。如果没有，请添加超时：

Print() {
  this.ToggleForPrint = true;
  setTimeout(() => window.print());
}

Answer 2

我不会使用angular解决这个问题，而是使用CSS。您可以创建一个hide-on-print类，您可以将其应用于按钮（或任何元素），以使其在打印页面时消失。像这样：

@media print {
  .hide-on-print {
    visibility: hidden;
  }
}

并使用它：

<button class="hide-on-print" (click)="Print()">Print</button>

强制刷新角度以进行打印

2 个答案: