Javascript window.print() 方法只工作一次

Question

我在某个 Angular 项目的某个组件中实现了以下代码片段。我可以成功打印，但是当我第二次尝试时，未触发 onClickPrint() 方法。我错过了什么？

  onClickPrint() {
    const printContents = document.getElementById('permit').innerHTML;
    const originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    // document.body.innerHTML = originalContents;
    window.close();
  }


<button mat-button (click)="onClickPrint()" class="my-btn">Print licence</button>

<mat-card size="B4" class=" container w-100  bg" id="permit">

...

</mat-card> 

当我检查按钮时...

Answer 1

当您直接使用此代码修改 DOM 时:

const printContents = document.getElementById('permit').innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;

这样做会破坏所有引用资料和我无法开始理解的内容。

为什么不使用单独的组件和路由来包含您要打印的内容，然后在加载该组件后在该组件上运行打印。

例如:

onClickPrint() {
    this.router.navigate(['/print-details']);
}

在小型服务中维护需要打印的细节:

class DetailService {
    public details;
}

在你的打印组件中

class PrintComponent implements AfterViewInit  {       
    ngAfterViewInit() {
        this.detailService.details; 
        // Finish out your component template view or whatever you need to do
        window.print();
    }
}

在 Angular 中工作时，尽量让 Angular 完成所有繁重的 DOM 工作。如果你绝对必须修改它，有一个类 Render2 可以提供帮助，但它是最后的选择。 https://angular.io/api/core/Renderer2