Typescript Angular2-单击打印链接后在同一窗口中启用打印功能_Typescript_Angular2 Template

Typescript Angular2-单击打印链接后在同一窗口中启用打印功能

typescript

Typescript Angular2-单击打印链接后在同一窗口中启用打印功能,typescript,angular2-template,Typescript,Angular2 Template,在我的angular应用程序中，我有一个组件，在模板中我有一个打印链接，点击该链接我必须启用打印功能- <div> <a href="#" (click)="print()">PRINT</a> </div> 和在.ts文件中- print(): void { let printContents, popupWin; printContents = document.getElementById('print-section'

在我的angular应用程序中，我有一个组件，在模板中我有一个打印链接，点击该链接我必须启用打印功能-

<div>
<a href="#" (click)="print()">PRINT</a>
</div>

和在.ts文件中-

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

print（）：无效{
让打印内容，弹出窗口；
printContents=document.getElementById（'print-section'）.innerHTML；
popupWin=window.open（“”，"U blank’，“top=0，left=0，height=100%，width=auto”）；
popupWin.document.open（）；
popupWin.document.write(`
打印选项卡
//……定制风格。。。。。。。
${printContents}
`
);
popupWin.document.close（）；
}

这可以工作，但会打开一个新的打印窗口。有没有办法，我可以在同一个窗口。我也试过了-

<a href="javascript:window.print();">Print</a>

但上述两种方法都不起作用。你知道如何用angular2打印页面吗。

使用onclick调用print（）

尝试使用onclick调用print（）

试试这个

这个很好用。我们将能够打印特定的组件，但是我们需要在document.write函数的标记中添加样式。

这很好。我们将能够打印特定的组件，但是我们需要在document.write函数的标记中添加样式。

href=“javascript:window.print（）；”

以何种方式不起作用？@torazaburo样式完全扭曲。页面看起来扭曲。您可能需要定义一些

@media print

样式，以使打印的页面符合您的要求。在样式标记中编写CSS很有效。

href=“javascript:window.print（）；”

不以什么方式工作？@torazaburo样式完全扭曲。页面看起来扭曲。您可能需要定义一些

@media print

样式，以使打印的页面符合您的要求。在样式标记中编写CSS很有效。为什么这比

href更好/不同=“javascript:window.print（）”

？为什么这比

href=“javascript:window.print（）”

更好/不同？