पूर्ण वेबपेज शामिल किए बिना बटन क्लिक पर विशिष्ट HTML सामग्री प्रिंट करना

किसी उपयोगकर्ता के बटन क्लिक पर केवल विशिष्ट HTML सामग्री प्रिंट करना विभिन्न तरीकों से प्राप्त किया जा सकता है तौर तरीकों। एक विधि वांछित HTML को धारण करने के लिए एक छिपा हुआ div तत्व बनाना है। मुद्रण उद्देश्यों के लिए इस डिव की डिस्प्ले प्रॉपर्टी को 'प्रिंट' पर सेट किया जाना चाहिए, जबकि स्क्रीन डिस्प्ले के लिए इसका डिस्प्ले मान 'कोई नहीं' रहता है। पृष्ठ पर अन्य तत्वों के प्रदर्शन गुणों को स्क्रीन पर दिखाने के लिए समायोजित किया जा सकता है लेकिन मुद्रण के दौरान छिपाया जा सकता है। हालाँकि, इस पद्धति के लिए सभी पृष्ठ तत्वों के प्रदर्शन गुणों के सावधानीपूर्वक प्रबंधन की आवश्यकता होती है।

एक वैकल्पिक दृष्टिकोण एक नया, पृथक वेबपेज बनाना है जिसमें केवल मुद्रित होने वाली HTML सामग्री शामिल है। जब उपयोगकर्ता प्रिंट बटन पर क्लिक करता है तो यह नया पेज गतिशील रूप से एक छिपे हुए आईफ्रेम में लोड किया जा सकता है। एक बार जब आईफ्रेम पूरी तरह से लोड हो जाता है, तो ब्राउज़र के प्रिंट फ़ंक्शन को ट्रिगर किया जा सकता है, और एम्बेडेड HTML बिना किसी अवांछित पेज तत्व के प्रिंट किया जाएगा। यह विधि मुद्रण प्रक्रिया पर अधिक लचीलापन और गतिशील नियंत्रण प्रदान करती है।

यहां दूसरे दृष्टिकोण का उपयोग करके एक उदाहरण दिया गया है:

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

यह समाधान आपको मुख्य वेबपेज की उपस्थिति या सामग्री को संशोधित किए बिना बटन क्लिक पर विशिष्ट HTML सामग्री को आसानी से प्रिंट करने की अनुमति देता है। यह सुनिश्चित करता है कि केवल इच्छित HTML मुद्रित किया गया है, जो अधिक उपयोगकर्ता-अनुकूल मुद्रण अनुभव प्रदान करता है।