我正在尝试在我的发票应用程序中实现打印功能，但是，我的打印功能仅对我有效一次 - 即仅在第一次单击时有效。当我尝试再次单击时，未触发单击功能。当我检查 console.log 时，抛出以下错误: 错误类型错误:无法读取 null 的属性“postMessage”
这是我尝试过的:
printInvoice() {
const printContents = document.getElementById('print-index-invoice').innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}<div class="modal fade" id="modalIndexInvoicePreview" tabindex="-1" role="dialog">
<button type="submit" class="btn btn-info btn-lg mt-2 position-absolute" (click)="printInvoice()">
<i class="fa fa-print icon-print"></i>Print</button>
<div class="modal-dialog modalContent">
<div class="modal-content modalIndexInvoicePreview" id="print-index-invoice">
<div class="modal-header div-logo">
<img class="logo-invoice" [src]="logoUrl">
<div>
<b>Invoice|Receipt|Attachment</b>
</div>
</div>
</div>
</div>
</div>最佳答案
有两种方法可以实现打印功能。首先，您可以利用 CSS 媒体，这将允许您将媒体用作“打印”。
第二个选项是将 CSS 附加到您的打印部分。您可以轻松地启用媒体“在打印时”将外部样式表附加到打印模块。目前，我已在打印模块中启用了 Bootstrap 。您可以使用自己的样式表代替 Bootstrap 。
访问jsfiddle.net/rdtzvf2c/1/
正如您在结果中看到的，顶部文本和图像被拉到中心，这是通过打印 div 时动态应用的引导 CSS 实现的。
如果需要任何其他帮助，请告诉我。
function printDiv() {
var divToPrint = document.getElementById('print-index-invoice');
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" media="print"/><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function() {
newWin.close();
}, 10);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-content modalIndexInvoicePreview" id="print-index-invoice">
<div class="container col-md-12">
<div class="text-center">
This is right aligned!
<img src="https://www.gstatic.com/webp/gallery3/1.png" class=" rounded mx-auto d-block" alt="...">
</div>
</div>
<div class="modal-header div-logo">
<div>
<b>Invoice|Receipt|Attachment</b>
</div>
</div>
</div>
<input type='button' id='btn' value='Print' onclick='printDiv();'>关于javascript - 如何在 Angular 中实现打印功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58873088/