新标签中的 Angular 4 打印预览答案

【问题标题】：Angular 4 print preview in new tab新标签中的 Angular 4 打印预览
【发布时间】：2017-11-28 06:00:28
【问题描述】：

我正在研究 angular4 打印功能，我想在默认情况下在新选项卡中打开打印预览以及打印弹出窗口。我无法弄清楚如何将数据从父窗口传递到子窗口来做同样的事情。有人可以提出一些建议吗？

【问题讨论】：

请阅读How to Ask，并添加您目前编码的内容
create html page and print to new tab in javascript的可能重复

标签： javascript angular typescript printing tabs

【解决方案1】：

使用以下代码：

这将在另一个选项卡中打开此页面并打开打印弹出窗口。

页面加载需要一些时间，因此请根据需要使用 setTimeout。

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

【讨论】：

我试过了，但是整个应用程序在新标签页中打开，而不是打印预览。谢谢。
可能会有所帮助：stackoverflow.com/questions/27248259/…

【解决方案2】：

在尝试允许用户在新标签中查看和打印 QR 图像时遇到了同样的情况。这是我完成它的方法：

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

并调用为：

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

【讨论】：

【解决方案3】：

这将在 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);
}

【讨论】：

【解决方案4】：

/* 使用 ViewChild 引用包含应打印内容的元素。 */ @ViewChild('PackageSlipPrint', { static: true }) printableRef?: ElementRef;

打印（）{ 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);

}

这里，docRef 是什么？任何人都可以更新我。

【讨论】：