我想在 angular 2 中打印 HTML 模板。我对此进行了探索，我在 angularjs 1 中得到了解决方案 在 Angularjs 1 中打印 Html 模板
任何建议将不胜感激
在 Angular 2 中打印 Html 模板（Angular 2 中的 ng-print）
IT技术
javascript
angularjs
angular
2021-01-30 15:52:58
6个回答
这就是我在 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）和更多开箱即用的可控和安全打印案例。
万一其他人遇到这个问题，如果您已经布置了页面，我建议使用媒体查询来设置您的打印页面。然后您可以简单地将打印功能附加到您的 html 按钮并在您的组件中调用 window.print();
组件.html：
<div class="doNotPrint">
Header is here.
</div>
<div>
all my beautiful print-related material is here.
</div>
<div class="doNotPrint">
my footer is here.
<button (click)="onPrint()">Print</button>
</div>
组件.ts：
onPrint(){
window.print();
}
组件.css：
@media print{
.doNotPrint{display:none !important;}
}
您还可以选择在媒体查询中添加您不希望打印的其他元素/部分。
您也可以在打印查询中更改文档边距和所有内容，这使其功能非常强大。网上有很多文章。这是一个看起来很全面的：https : //www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/ 这也意味着您不必创建单独的脚本来创建“打印版本” ' 的页面或使用大量的 javascript。
你可以在 angular 2 中这样做
在 ts 文件中
export class Component{
constructor(){
}
printToCart(printSectionId: string){
let popupWinindow
let innerContents = document.getElementById(printSectionId).innerHTML;
popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
}
在 html 中
<div id="printSectionId" >
<div>
<h1>AngularJS Print html templates</h1>
<form novalidate>
First Name:
<input type="text" class="tb8">
<br>
<br> Last Name:
<input type="text" class="tb8">
<br>
<br>
<button class="button">Submit</button>
<button (click)="printToCart('printSectionId')" class="button">Print</button>
</form>
</div>
<div>
<br/>
</div>
</div>
编辑：更新了更通用的方法的片段
正如已接受答案的扩展一样，
要获取现有样式以保留目标组件的外观，您可以：
进行查询以从顶级文档中提取
<style>和<link>元素将其注入到 HTML 字符串中。
抓取 HTML 标签：
private getTagsHtml(tagName: keyof HTMLElementTagNameMap): string
{
const htmlStr: string[] = [];
const elements = document.getElementsByTagName(tagName);
for (let idx = 0; idx < elements.length; idx++)
{
htmlStr.push(elements[idx].outerHTML);
}
return htmlStr.join('\r\n');
}
然后在现有的代码段中：
const printContents = document.getElementById('print-section').innerHTML;
const stylesHtml = this.getTagsHtml('style');
const linksHtml = this.getTagsHtml('link');
const popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
${linksHtml}
${stylesHtml}
^^^^^^^^^^^^^ add them as usual to the head
</head>
<body onload="window.print(); window.close()">
${printContents}
</body>
</html>
`
);
popupWin.document.close();
现在使用现有的样式（Angular 组件为自己创建一个铸造的样式），以及现有的样式框架（例如 Bootstrap、MaterialDesign、Bulma）它应该看起来像现有屏幕的片段
打印服务
import { Injectable } from '@angular/core';
@Injectable()
export class PrintingService {
public print(printEl: HTMLElement) {
let printContainer: HTMLElement = document.querySelector('#print-container');
if (!printContainer) {
printContainer = document.createElement('div');
printContainer.id = 'print-container';
}
printContainer.innerHTML = '';
let elementCopy = printEl.cloneNode(true);
printContainer.appendChild(elementCopy);
document.body.appendChild(printContainer);
window.print();
}
}
我要打印的组件
@Component({
selector: 'app-component',
templateUrl: './component.component.html',
styleUrls: ['./component.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MyComponent {
@ViewChild('printEl') printEl: ElementRef;
constructor(private printingService: PrintingService) {}
public print(): void {
this.printingService.print(this.printEl.nativeElement);
}
}
不是最好的选择，但有效。
其它你可能感兴趣的问题