gpt4 book ai didi

javascript - Angular 2 中的打印 Html 模板(Angular 2 中的 ng-print)

转载 作者:IT王子 更新时间:2023-10-29 03:07:25 25 4
gpt4 key购买 nike

我想以 Angular 2 打印 HTML 模板。我已经对此进行了探索,我在 angularjs 1 中找到了解决方案 Print 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();
}

更新:

您也可以缩短路径并仅使用 ngx-print用于更少不一致编码(混合 JS 和 TS)和更多开箱即用的可控和安全打印案例的库。

关于javascript - Angular 2 中的打印 Html 模板(Angular 2 中的 ng-print),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41379274/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com