html - كيفية طباعة صفحة في Angular 4 باستخدام TS

لدي تطبيق ويب، وفي بعض الصفحات أحتاج إلى استخدام طابعة لطباعة الصفحة، ولكن لدي شريط جانبي وبقية الصفحة مخصصة لمكون، كيف يمكن عدم طباعة الشريط الجانبي وطباعه هذا المكون فقط، لقد استخدمت هذا الكود في TypeScript.

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