在 Angular 2 中打印 Html 模板(Angular 2 中的 ng-print) [英] Print Html template in Angular 2 (ng-print in Angular 2)
问题描述
我想在 angular 2 中打印 HTML 模板.我已经探索过这个我在 angularjs 1 中得到了解决方案 Print HtmlAngularjs 1 中的模板
任何建议将不胜感激
这就是我在 angular2 中所做的(它类似于那个 plunkered 解决方案)在您的 HTML 文件中:
//您要打印的 html 内容<button (click)="print()">print</button>
并在您的 TS 文件中:
print(): void {让打印内容，弹出窗口；printContents = document.getElementById('print-section').innerHTML;popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');popupWin.document.open();popupWin.document.write(`<头><title>打印标签</title><风格>//........自定义样式......</风格><body onload="window.print();window.close()">${printContents}</body></html>`);popupWin.document.close();}<小时>
更新:
您也可以快捷地使用ngx-print 库减少不一致的编码(混合 JS 和 TS)和更多开箱即用的可控和安全的打印案例.
I want to print HTML template in angular 2. I had explored about this I got solution in angularjs 1 Print Html Template in Angularjs 1
Any suggestion would be appreciated
That's how I've done it in angular2 (it is similar to that plunkered solution) In your HTML file:
<div id="print-section">
// your html stuff that you want to print
</div>
<button (click)="print()">print</button>
and in your TS file :
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();
}
UPDATE:
You can also shortcut the path and use merely ngx-print library for less inconsistent coding (mixing JS and TS) and more out-of-the-box controllable and secured printing cases.
这篇关于在 Angular 2 中打印 Html 模板(Angular 2 中的 ng-print)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
