المزايا

• تحتفظ صفحتك بالتفاعل بعد الطباعة
• يلعب بشكل جيد مع الأطر
• لا يتطلب تكرار واجهة المستخدم الخاصة بك للطباعة

خطوات

1. إخفاء كل محتوى الصفحة عندما تكون في وضع الطباعة
2. جعل العنصر المستهدف مرئيًا في وضع الطباعة

الخطوة 1

@media print {
  body {
    visibility: hidden;
  }
}

الخطوة 2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}

ثم اطبع

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());

تتجنب هذه الطريقة مأزق فقدان التفاعل، بينما تستبدل الطرق الأخرى محتوى الصفحة بالكامل بـ HTML الثابت وبالتالي فقدان التفاعل.

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;