在Angular 2中打印HTML模板（在Angular 2中使用ng-print）

一尘不染

在Angular 2中打印HTML模板（在Angular 2中使用ng-print）

angularjs

我想在angular 2中打印HTML模板。我对此进行了探索，我在angularjs 1中得到了解决方案。在Angularjs
1中打印HTML模板。

任何建议将不胜感激

阅读 410

2020-07-04

共1个答案

一尘不染

这就是我在angular2中完成此操作的方式（它类似于那种 笨拙的 解决方案）在您的HTML文件中：

<div id="print-section">
  // your html stuff that you want to print
</div>
<button (click)="print()">print</button>

并在您的TS文件中：

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

更新：

您还可以缩短路径，仅使用ngx-
print库来减少不一致的编码（混合JS和TS）和更多现成的可控制和安全的打印案例。

2020-07-04