अपने ब्राउज़र के प्रिंट या सेव को खोलने वाला बटन बनाने का तरीका जानें फ़ाइल विंडो प्रॉम्प्ट जब आप उस पर क्लिक करते हैं।
यदि आप किसी दी गई वेबसाइट पर किसी पेज को प्रिंट या सहेजना चाहते हैं, तो आप अपने ब्राउज़र पर जा सकते हैं (आमतौर पर ऊपरी बाएं कोने):
- फ़ाइल → प्रिंट करें → . पर क्लिक करें और या तो सहेजें . क्लिक करें फ़ाइल को PDF दस्तावेज़ के रूप में सहेजने के लिए बटन, या इसे अपने प्रिंटर से प्रिंट करें।
- शॉर्टकट प्रिंट/सहेजें: cmd + p (मैक) / ctrl + p (विंडोज़)।
लेकिन क्या होगा यदि आप अपने उपयोगकर्ता के लिए किसी पृष्ठ को प्रिंट या सहेजना आसान बनाना चाहते हैं, उन्हें प्रिंट या फ़ाइल सहेजें बटन प्रदान करके जो तुरंत ब्राउज़र को खोलता है क्लिक पर प्रिंट प्रॉम्प्ट विंडो?
कोई बात नहीं, पहले एक उपयुक्त वर्ग नाम वाला एक बटन बनाते हैं:
<button class="button-print-or-save-document">Print or Save Document</button>
अपने कोड को सभी के लिए पढ़ने में आसान बनाएं!
कक्षाओं, चरों, . जैसी चीज़ों के लिए और कार्य जैसा कि हम ऊपर दिए गए बटन पर करते हैं, आमतौर पर लंबे, स्पष्ट नामों का उपयोग करना बेहतर होता है। संक्षिप्त, संक्षिप्त (अंतर्निहित) नामों के विपरीत, जैसे btn-pos-d
. कोई भी इसे पढ़ना पसंद नहीं करता।
अब जावास्क्रिप्ट के साथ बटन को इंटरैक्टिव बनाते हैं:
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
. को कॉल करने के लिए समारोह।
डेमो कोड की जाँच करें।