CODEWITHSUNDEEP
javascripthtmlangular
Kelvin Cayman
Kelvin Cayman

Reputation: 187

My angular App freezes when the print window is open

I am making an angular app that requires to create a document, open it in a new tab and print a section. I have already achieved this.

The problem is my client want to continue interacting with the app while the print window is still open.

But I have noticed that when this print window is open, the app like it freezes, all click events no longer work until you close this window.

I have tried a few solutions provided here on Stack Overflow but none really works. In one case I tried setTimeout().

Here is my html code: 

<!-- Print button-->
<div class="footer-share" (click)="print()">
   <button class="btn btn-back"><span class="mdi mdi-printer"></span><span>&nbsp;Drucken</span></button>
</div>

And here is the funtion in my ts file:

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

What can I change to make it possible for the user to continue interacting with the app when the print tab is still open?

Upvotes: 1

Views: 1303

Answers (2)

Silvair L. Soares
Silvair L. Soares

Reputation: 1066

Try to do what was suggested in this other question, it worked for me.

https://stackoverflow.com/a/62808575/7912859

According to the documentation: (https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features) window.open() currently supports features. Hence we can pass noreferrer or noopener as shown below, which does not freeze or block the parent window.

window.open(hostUrl, '_blank', 'noreferrer')

Upvotes: 0

Maximillion Bartango
Maximillion Bartango

Reputation: 1599

Remove the html property and value for onload in .write() method. Then, remove the close method directly after the write method use this instead:

popupWin.focus();
popupWin.print();
popupWin.close();

Upvotes: 1

Related Questions