2017-04-25 91 views
0

在我的角度应用程序中,我有一个组件,在模板中,我有一个打印链接点击我必须启用打印功能。这样的事情在我的HTML的Angular2-在打印链接点击同一个窗口中启用打印功能

<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(); 
} 

这工作,但它会打开一个新的窗口打印。有没有,我可以在同一个窗口中看到。 我也tried-

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

但上述两种方法不起作用。任何想法如何让我的页面打印在angular2中。

+0

'href =“javascript:window.print();”'不能以什么特定的方式工作? – 2017-04-25 06:57:24

+0

@torazaburo的风格完全扭曲。页面看起来扭曲。 –

+0

您可能需要定义一些'@media print'样式以使打印的页面以您想要的方式出现。 – 2017-04-25 07:15:56

回答

0

这工作正常。我们将能够打印特定的组件然而,我们需要在document.write函数中添加标签内的样式。

0

使用onclick来调用print()。

试试这个<a href="#" onclick="print();">Print</a>

+0

为什么这个工作比'href =“javascript:window.print()”'更好/不同? – 2017-04-25 07:29:23