web-dev-qa-db-ja.com

Angular 4でページを印刷する方法

一部のページではページを印刷するためにプリンターを作成する必要がありますが、サイドバーがあり、残りはコンポーネントのページですが、このコンポーネントだけをサイドバーに印刷しないようにする方法はありますが、 TSで使用されるこのコード。

print() {
window.print();
}

HTMLコードはこのコードから始まります。

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

</div>
htmlangulartypescript
4
nideba

まず、そのコンポーネントに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();
10
Mohd Tabish Baig

サイドバーコンポーネントのscssファイルまたはcssファイルで、メディアクエリを使用して印刷するときに非表示にできます。

@media print {
  :Host {
    display: none;
  }
}
2
Ajay Reddy

この解決策を試すことができます。

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;
}
2
Krishna Rathore