在 Angular 2 中打印 Html 模板

发布于12月29日

我想打印Angular 为2的HTML模板.我已经探索过了，我在Angular 1Print Html Template in Angularjs 1 中得到了解决方案

如有任何建议，我们将不胜感激.

推荐答案

这就是我在angular2中(类似于plunkered解决方案)在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();
}

更新:

You can also shortcut the path and use merely 100 library for less inconsistent coding (mixing JS and TS) and more out-of-the-box controllable and secured printing cases.