我正在制作一个角度应用程序,该应用程序需要创建一个文档,在新选项卡中打开它并打印一个部分。我已经做到了。
问题是我的客户希望在打印窗口仍处于打开状态时继续与应用程序进行交互。
但是我注意到,当打开此打印窗口时,类似它的应用程序将冻结,所有单击事件将不再起作用,直到您关闭此窗口。
我尝试了Stack Overflow此处提供的一些解决方案,但没有一个真正起作用。在一种情况下,我尝试了setTimeout()
。
这是我的html代码:
<!-- Print button-->
<div class="footer-share" (click)="print()">
<button class="btn btn-back"><span class="mdi mdi-printer"></span><span> Drucken</span></button>
</div>
这是我的ts文件中的功能:
print() {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>XYZ Records</title>
<style type="text/css" media="print">
@page { size: landscape; }
</style>
<style>${printStyles}</style>
</head>
<body onload="window.print();window.close()">${printContents}
<h2>This is the end!
</h2>
<img src="/assets/images/tempton-logo.png" style="width:60%;padding-top:0%;" alt="homepage" class="dark-logo" />
</body>
</html>`
);
popupWin.document.close();
}
在打印选项卡仍处于打开状态时,我可以进行哪些更改以使用户能够继续与该应用进行交互?
最佳答案
在.write()方法中删除onload的html属性和值。然后,在write方法改为使用以下方法后,直接删除close方法:
popupWin.focus();
popupWin.print();
popupWin.close();