I am trying to implement a print functionality within my invoicing app, however, the print function I have only works for me once-that is, on the first click only. When I try to click again the click function is not triggered. And when I check my console.log, the following is error is thrown: ERROR TypeError: Cannot read property 'postMessage' of null
Here is what i have tried:
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>There are 2 ways to achieve the print functionality. First is you can utilize CSS media which will allow you to use media as "print".
The second option is to attach CSS to your print section part. You can easily enable media to "print while" attaching the external stylesheet to your print module. For now, I have enabled the bootstrap in the print module. You can use your own stylesheet in place of the bootstrap.
Visit jsfiddle.net/rdtzvf2c/1/
As you can see in the result, the top text and image are being pulled in the center which is happening through the bootstrap CSS applied dynamically while printing the div.
Do let me know in case of any other help.
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();'>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments