我有一个Web应用,在某些页面上需要打印该页面,但是我有一个侧栏和另一个组件的页面部分。有什么方法可以只打印这个组件而不是侧栏?我已经在TypeScript中使用了这段代码。
print() {
window.print();
}
Html代码从这里开始。
div class="container">
//Here I have all the HTML source
</div>
我有一个Web应用,在某些页面上需要打印该页面,但是我有一个侧栏和另一个组件的页面部分。有什么方法可以只打印这个组件而不是侧栏?我已经在TypeScript中使用了这段代码。
print() {
window.print();
}
Html代码从这里开始。
div class="container">
//Here I have all the HTML source
</div>
首先为该组件分配一个ID,然后:
const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();
WindowPrt.document.write(printContent.innerHTML);
之前插入以下内容:WindowPrt.document.write('<link rel="stylesheet" type="text/css" href="yourCssFileName.css">');
- Mohd Tabish Baig你可以尝试这个解决方案。
HTML 文件
<div class="container" id="component1">
//Here I have all the HTML source
</div>
<div class="container" id="component2">
//Here I have all the HTML source
</div>
<button (click)="printComponent('component1')">Print</button>
TS 文件
printComponent(cmpName) {
let printContents = document.getElementById(cmpName).innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
@media print {
:host {
display: none;
}
}
在 TypeScript 中没有直接的窗口打印函数,我们需要创建一个新的 print() 函数,并在该函数中编写 JavaScript 打印函数,如下所示。
<div click("print()")class="container">
</div>
在 Ts 文件中
print() {
window.print();
}