Html Question posted in
Some basic documentation can be found here.

Html – Issue with Opening and Printing in New Tab in Angular

Hi and thank you for your response.

I’m facing a problem when attempting to open a new tab in Chrome and Edge and then print the content of that tab. My project is built using Angular.

Steps to Reproduce:

Step 1: From Tab 1, click a button to open a new tab. After the new tab is loaded, it automatically calls window.print();.

print() {
    // Your content
    let content = `
    <html>
      <head>
        <title>Print Page</title>
      </head>
      <body onload="window.print()">
        Content
      </body>
    </html>
    `;

    // Create a Blob from the HTML content
    let blob = new Blob([content], { type: 'text/html' });

    // Create a URL for the Blob
    let url = URL.createObjectURL(blob);

    // Open a new tab with the created URL
    window.open(url, '_blank');

    // Release the URL object after the new tab is opened
    URL.revokeObjectURL(url);
  }

Step 2: Close the newly opened tab (click ‘x’ icon).

After following the outlined steps, the new tab opens successfully, but upon closing the tab using the ‘x’ icon, Tab 1 (the original tab) becomes partially or fully disabled. This results in a loss of interactivity, and the issue persists until a manual refresh of Tab 1.
Expected Behavior:
Closing the newly opened tab should not affect the functionality or disable any elements in Tab 1.

Code Sample:

Link to StackBlitz Demo

Demo Link:

Live Demo

Thanks again for your valuable help!

Tags:

2

Answers


  1. 0

    One way to address this issue is to separate the printing functionality from the tab opening process. Instead of automatically invoking window.print() upon opening the new tab, you can let the user trigger the printing action manually. Here’s how you can modify your code to achieve this:

    print() {
    // Your content
    let content = `
    <html>
      <head>
        <title>Print Page</title>
      </head>
      <body>
        Content
        <script>
          // Function to trigger printing when the page is loaded
          function printPage() {
            window.print();
          }
          // Call the printPage function after a delay to ensure proper rendering
          setTimeout(printPage, 1000); // Adjust the delay as needed
        </script>
      </body>
    </html>
    `;

    // Create a Blob from the HTML content
    let blob = new Blob([content], { type: 'text/html' });

    // Create a URL for the Blob
    let url = URL.createObjectURL(blob);

    // Open a new tab with the created URL
    let newTab = window.open(url, '_blank');

    // Release the URL object after the new tab is opened
    URL.revokeObjectURL(url);

    // Listen for the close event on the new tab
    newTab.addEventListener('beforeunload', () => {
      // Perform any cleanup or necessary actions here
      // For example, re-enable elements in Tab 1 if needed
    });
}
    Login or Signup to reply.
  2. 0

    Answer from Sasi Kumar M ( please upvote this answer also! ) Finally helped me solve your issue, please call the window.open with the third parameter noreferrer which does not pass a reference to the opening tab and this seems to fix the issue!!

    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

/**
 * https://javascript.plainenglish.io/the-new-features-of-angular-v14-851995870f59
 *
 * Planning on joining Medium? Membership is $5/month and gives unlimited access
 * to all stories on Medium. Use my referral link:
 * https://vkagklis.medium.com/membership
 */
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <input >
    <br />
    <button (click)="print()">Print</button>
  `,
})
export class AppComponent {
  print() {
    let content = `
          <html>
            <head>
              <title>New Tab</title>
            </head>
            <body onload="window.print()">
              Content
            </body>
          </html>
        `;

    // Create a Blob from the HTML content
    let blob = new Blob([content], { type: 'text/html' });

    // Create a URL for the Blob
    let url = URL.createObjectURL(blob);

    // Open a new tab with the created URL
    window.open(url, '_blank', 'noreferrer'); // <- changed here!

    // Release the URL object after the new tab is opened
    URL.revokeObjectURL(url);
  }
}

    Please note stackblitz may not work, I found the solution in my local system, would suggest you to do the same!

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search