window:afterprint 在 Angular 中的 window.print() 之后不工作

Question

我在按钮上打开 window.print()

<button class="btn btn-primary" type="button" (click)="printDocument()"> Print </button>

在那个 printDocument 方法上，我在一个新的 window 中打开了文档并调用了 window.print()。

printDocument() {
    let str = `<embed src="https://beta.lottoweaver.com/WeaverDoc/commonContent/www.nationallottery.co.za/playerDocument/408466_ID_PROOF_null_1614276509176.jpg" width='100%' height="100%">`;

    this.OpenWindow = window.open("","","width=900, height=600, left=200, top=100");
    this.OpenWindow.document.body.innerHTML = str;
    this.OpenWindow.print();
  }

现在，在用户取消或打印文档后，我想关闭 window 所以我用 @HostListener

试了一下

@HostListener("window:afterprint", ["$event"])
  onafterPrint(event) {
    this.OpenWindow.close();
  }

但是当我从打印中取消或保存时永远不会调用此事件 window。

打印window关闭后如何关闭window？

这是一个有效的 stackblitz：https://stackblitz.com/edit/angular-ivy-tnxv4w

Answer 1

尝试这种方式，打开打印 window:

<div [id]="'print-section'">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eius error expedita nam natus, nulla veritatis? Consequuntur corporis, delectus ducimus eaque eius, eos, magnam molestias omnis quaerat quidem rem soluta.
</div>



print(): void {
    const printContents = document.getElementById('print-section').innerHTML;
    const popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
        <html>
            <head>
                <title>Print Page</title>
            </head>
            <body
                style="font-size: 14px;
                    font-family: 'Source Sans Pro', 'Helvetica Neue',
                    Helvetica, Arial, sans-serif;
                    color: #333";
                onload="document.execCommand('print');window.close()">${printContents}</body>
        </html>`
    );
    popupWin.document.close();
}

Answer 2

试试这个，它会很好用！

.html

<button class="btn btn-primary" type="button" (click)="printDocument()"> Print 
</button>

.ts

 printDocument() {
          let str = `<embed src="https://beta.lottoweaver.com/WeaverDoc/commonContent/www.nationallottery.co.za/playerDocument/408466_ID_PROOF_null_1614276509176.jpg" width='100%' height="100%">`;
this.OpenWindow = window.open(
  "",
  "_blank",
  "width=900, height=600, left=200, top=100"
);

this.OpenWindow.document.write(
  `<html>
        <head>
            <title>Hello Print</title>
        </head>
        <body onafterprint="window.close()"">`+str+`</body>
    </html>
    `
);

this.OpenWindow.print();
  }

this is demo

window:afterprint 在 Angular 中的 window.print() 之后不工作

window:afterprint not working after window.print() in Angular

angular

window