Question

我有一个网络应用程序，而在某些页面我需要打印机打印页面但我有一个侧栏，其余部分是组件的页面，如何才能打印侧栏只有这个组件，我在TS中使用了这段代码。

print() {
window.print();
}

Html代码从这个开始。

div class="container">
//Here I have all the HTML source

</div>

Answer 1

首先为该组件分配一个id，然后：

ContentProvider

Answer 2

您可以尝试此解决方案。

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;
}

Answer 3

在侧栏组件scss文件或css文件中...使用媒体查询进行打印时可以将其隐藏：

@media print {
  :host {
    display: none;
  }
}

如何使用TS在Angular 4中打印页面

3 个答案: