Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट के साथ एक पेज बटन को प्रिंट या सेव कैसे करें?

अपने ब्राउज़र के प्रिंट या सेव को खोलने वाला बटन बनाने का तरीका जानें फ़ाइल विंडो प्रॉम्प्ट जब आप उस पर क्लिक करते हैं।

यदि आप किसी दी गई वेबसाइट पर किसी पेज को प्रिंट या सहेजना चाहते हैं, तो आप अपने ब्राउज़र पर जा सकते हैं (आमतौर पर ऊपरी बाएं कोने):

  • फ़ाइल → प्रिंट करें → . पर क्लिक करें और या तो सहेजें . क्लिक करें फ़ाइल को 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 . को कॉल करने के लिए समारोह।

डेमो कोड की जाँच करें।


  1. जावास्क्रिप्ट के साथ फुलस्क्रीन विंडो कैसे बनाएं?

    जावास्क्रिप्ट के साथ एक पूर्ण स्क्रीन विंडो बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style>    body{       font-

  1. जावास्क्रिप्ट के साथ एनिमेटेड प्रभाव बनाने के लिए आइकन का उपयोग कैसे करें?

    एनिमेटेड प्रभाव बनाने के लिए आइकन का उपयोग करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style>    #user {       font-size: 60px;       color:rgb(106, 33, 201);    }    body {     &n

  1. कैसे जांचें कि जावास्क्रिप्ट के साथ एक बटन क्लिक किया गया है या नहीं?

    जावास्क्रिप्ट का उपयोग करके बटन क्लिक किया गया है या नहीं, यह जांचने के लिए कोड निम्नलिखित है - उदाहरण दस्तावेज़ बॉडी { फॉन्ट-फ़ैमिली:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .result {फ़ॉन्ट-आकार:18पीएक्स; फ़ॉन्ट-वजन:500; रंग:नीला बैंगनी; }जावास्क्रिप्ट का उपयोग करके यह जांचना कि बटन क्लि