Nee*_*hod 42 javascript angularjs angular
我想在角度2中打印HTML模板.我已经探索过这个我在angularjs中得到解决方案1在Angularjs 1中打印Html模板
任何建议将不胜感激
sel*_* mn 77
这就是我在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)以及更多开箱即用的可控和安全打印案例.
Far*_*i78 18
如果其他人遇到此问题,如果您已经放置了页面,我建议使用媒体查询来设置您的打印页面.然后,您只需将打印功能附加到html按钮和组件调用window.print();
component.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>
component.ts:
onPrint(){
window.print();
}
component.css:
@media print{
.doNotPrint{display:none !important;}
}
您也可以选择添加您不希望在媒体查询中打印的其他元素/部分.
您也可以更改打印查询中的文档边距和所有内容,这使其非常强大.网上有很多文章.这是一个似乎全面:https://www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/ 这也意味着你不必创建一个单独的脚本来创建一个"印刷版'页面或使用大量的JavaScript.
Vik*_*iya 10
你可以在角度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）它应该看起来像现有屏幕的片段