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

Question

我有一個 web 應用程序，而在某些頁面中我需要制作打印機來打印頁面，但我有一個側欄，並且 rest 是一個組件的頁面，如何不打印側邊欄只這個組件，我有在 TS 中使用此代碼。

print() {
window.print();
}

Html 代碼從這個開始。

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

</div>

Answer 1

首先為該組件分配一個 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();

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

Answer 4

There is no Direct window print function in typescript We need to create a new function with print() and inside that print function write javascript print function as shown below

<div click("print()")class="container">
</div>

在 Ts 文件中

print() {
window.print();
}