एक बटन बनाना सीखें जो क्लिक करने पर आपके ब्राउज़र का प्रिंट या सेव फाइल विंडो प्रॉम्प्ट खोलता है।
यदि आप किसी भी वेबसाइट पर किसी पेज को प्रिंट या सेव करना चाहते हैं, तो आप अपने ब्राउज़र पर जा सकते हैं (आमतौर पर ऊपर बाएं कोने):
- File → Print → पर क्लिक करें और या तो फाइल को PDF डॉक्यूमेंट के रूप में सेव करने के लिए Save बटन पर क्लिक करें, या अपने प्रिंटर से प्रिंट करें।
- प्रिंट/सेव शॉर्टकट: cmd + p (Mac) / ctrl + p (Windows)।
लेकिन क्या होगा यदि आप अपने यूजर के लिए प्रिंट या सेव पेज को और भी आसान बनाना चाहते हैं, एक प्रिंट या सेव फाइल बटन प्रदान करके जो क्लिक करते ही ब्राउज़र के प्रिंट प्रॉम्प्ट विंडो को तुरंत खोल देता है?
कोई समस्या नहीं, पहले एक बटन बनाते हैं एक उपयुक्त क्लास नाम के साथ:
<button class="button-print-or-save-document">Print or Save Document</button>अपने कोड को सभी के लिए पढ़ने में आसान बनाएं!
क्लासेज, वेरिएबल्स, और फंक्शन्स जैसी चीजों के लिए आमतौर पर लंबे, स्पष्ट नामों का उपयोग करना बेहतर होता है जैसा हमने ऊपर बटन पर किया। छोटे, संक्षिप्त (निहित) नामों के विपरीत, जैसे btn-pos-d। कोई भी उसे पढ़ना पसंद नहीं करता।
अब JavaScript से बटन को इंटरैक्टिव बनाते हैं:
const buttonPrintOrSaveDocument = document.querySelector(
".button-print-or-save-document"
)
function printOrSave() {
window.print()
}
buttonPrintOrSaveDocument.addEventListener("click", printOrSave)अब आप इस बटन एलिमेंट को किसी भी वेब पेज पर पुन: उपयोग कर सकते हैं जहां आप अपने यूजर्स को त्वरित प्रिंट या सेव डॉक्यूमेंट विकल्प प्रदान करना चाहते हैं।
कोड कैसे काम करता है
- सबसे पहले, हम
button-print-or-save-documentक्लास वाले बटन को चुनते हैं और इसके रेफरेंस को एकconstवेरिएबल (buttonPrintOrSaveDocument) में स्टोर करते हैं। - फिर हम एक नामित फंक्शन डिक्लेरेशन
printOrSave()बनाते हैं जो जब कॉल किया जाता है तोwindow.printमेथड एक्सीक्यूट करता है। - अंत में, हम दो आर्गुमेंट्स के साथ एक इवेंट लिसनर सेट करते हैं: एक जो बटन एलिमेंट पर
clickइवेंट के लिए सुनता है, और दूसराprintOrSaveफंक्शन को कॉल करने के लिए।
डेमो कोड देखें।
