लाभ

• आपका पृष्ठ प्रिंट के बाद भी अन्तरक्रियाशीलता बनाए रखता है
• फ्रेमवर्क के साथ अच्छा खेलता है
• प्रिंट के लिए आपके यूआई को डुप्लिकेट करने की आवश्यकता नहीं है

कदम

1. प्रिंट मोड में होने पर पृष्ठ की प्रत्येक सामग्री छुपाएं
2. अपने लक्ष्य तत्व को प्रिंट मोड में दृश्यमान बनाएं

स्टेप 1

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

चरण दो

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