'Angular 4 print preview in new tab

I am working on angular4 print functionality and i want to open print preview in new tab by default along with print popup window. I am not able to figure out how to pass data from parent window to child window to do the same. Can someone suggest something?

Solution 1:^[1]

Use Following Code :

This will open this page in another tab and will open print pop up.

Page will take some time to load so use setTimeout according to your need.

var getPrint = window.open(document.URL, '_blank');
setTimeout(getPrint.print(), 3000);

Solution 2:^[2]

Had the same situation while trying to allow user to view and print QR image in new tab. Here is how I got it done:

  prepareQRForPrint(source: string) {
    return "<html><head><style type='text/css' media='print'>@media print { @page { size: auto; margin: 0;} body { margin:1.6cm; } }</style><script>function step1(){\n" +
      "setTimeout('step2()', 2);}\n" +
      "function step2(){window.print();window.close()}\n" +
      "</scri" + "pt></head><body onload='step1()'>\n" +
      "<img style='width:800px;height:1000px;' src='" + source + "' /></body></html>"
  }

  printPreviewQR(source: string) {
    let Pagelink = "about:blank";
    var pwa = window.open(Pagelink, "_new");
    pwa.document.open();

    pwa.document.write(this.prepareQRForPrint(source));
    pwa.document.close();
  }

And invoked as:

<a href="javascript: void(0)" (click)="printPreviewQR(QRPath)">QR-Code</a>

Solution 3:^[3]

This will work in Angular 12

/* 
Use ViewChild to reference the element that contains the content that should be printed.
*/
@ViewChild('PackageSlipPrint', { static: true }) printableRef?: ElementRef;

print() {
    var printdata = this.docRef.nativeElement.outerHTML;
     
    var tab = window.open('') as Window;
    tab.document.open();
    tab.document.write(printdata);
    setTimeout(() => {
        tab.stop();
        tab.print();
        tab.close();
    }, 300);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sangwin Gawande
Solution 2
Solution 3	LH7

'Angular 4 print preview in new tab

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]