html - איך להדפיס דף ב-Angular 4 עם TS

יש לי אפליקציית ווב ובחלק מהדפים אני צריך להפעיל מדפסת כדי להדפיס את הדף, אבל יש לי סרגל צד ושאר הדף הוא עבור קומפוננטה. איך אפשר לא להדפיס את סרגל הצד אלא רק את הקומפוננטה הזו, השתמשתי בקוד הזה ב-TS.

print() {
window.print();
}

קוד ה-HTML מתחיל מהזה.

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

</div>

תשובה #1

קודם כל תן מזהה לרכיב הזה, ואז:

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();

תשובה #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;
}

תשובה #3

בקובץ SCSS או CSS של קומפוננטת סרגל הצד...אתה יכול להסתיר אותו בעת הדפסה באמצעות שאילתות מדיה:

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