Angular 4 print preview in new tab

Question

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?

Possible duplicate of [create html page and print to new tab in javascript](https://stackoverflow.com/questions/27248259/create-html-page-and-print-to-new-tab-in-javascript) — Sangwin Gawande, Nov 28 '17 at 09:58

score 0 · Answer 1 · answered Nov 28 '17 at 07:51

0

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

answered Nov 28 '17 at 07:51

Sangwin Gawande

7,658
8
48
66

I had tried this but,the whole application is opening in a new tab instead of getting a print preview.Thanks. – alekya Nov 28 '17 at 09:35
Might Help : https://stackoverflow.com/questions/27248259/create-html-page-and-print-to-new-tab-in-javascript – Sangwin Gawande Nov 28 '17 at 09:58

Abhijeet_IXR · Answer 2 · 2018-04-02T07:38:01.010

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>

score 0 · Answer 3 · answered Aug 09 '21 at 05:09

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

Angular 4 print preview in new tab

3 Answers3