HTML onbeforeprint इवेंट एट्रिब्यूट: प्रिंट से पहले कार्रवाई

HTML onbeforeprint इवेंट एट्रिब्यूट तब ट्रिगर होता है जब एक पेज प्रिंट होने वाला होता है या प्रिंट डायलॉग बॉक्स खुलने से पहले। यह प्रिंट लेआउट समायोजित करने, वॉटरमार्क जोड़ने, संवेदनशील डेटा छिपाने, या प्रिंट-विशिष्ट स्टाइल लागू करने के लिए उपयोगी है।

सिंटैक्स (Syntax)

<tagname onbeforeprint="script"></tagname>

आमतौर पर <body> पर उपयोग किया जाता है।

उदाहरण (Example)

यह उदाहरण प्रिंट से पहले पेज का बैकग्राउंड बदलता है और एक वॉटरमार्क जोड़ता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      padding: 20px;
      font-family: Arial, sans-serif;
      transition: background 0.3s;
    }
    p {
      font-size: 1.1rem;
      line-height: 1.6;
    }
    .watermark {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      font-size: 8rem;
      color: rgba(219, 19, 58, 0.1);
      font-weight: bold;
      pointer-events: none;
      z-index: 9999;
      display: none;
      white-space: nowrap;
    }
    .print-only {
      display: none;
    }
    .screen-only {
      display: block;
    }
    @media print {
      .print-only { display: block !important; }
      .screen-only { display: none !important; }
      .watermark { display: block !important; }
      body { background: white !important; }
    }
    .btn {
      background: #db133a;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
      font-size: 1rem;
      margin: 0.5rem;
    }
  </style>
</head>
<body onbeforeprint="beforePrint()" onafterprint="afterPrint()">
  <div class="watermark" id="watermark">गोपनीय</div>
  
  <h1>HTML onbeforeprint इवेंट एट्रिब्यूट डेमो</h1>
  <p>मैं कुछ डमी टेक्स्ट के साथ एक पैराग्राफ HTML एलिमेंट हूँ।</p>
  <p style="color:#db133a;">अब इस दस्तावेज़ को प्रिंट करने का प्रयास करें (Ctrl+P)।</p>
  
  <div class="screen-only">
    <button class="btn" onclick="window.print()">प्रिंट डायलॉग खोलें</button>
    <button class="btn" onclick="simulatePrint()">प्रिंट इवेंट सिमुलेट करें</button>
  </div>
  
  <div class="print-only">
    <p><strong>प्रिंट संस्करण - गोपनीय दस्तावेज़</strong></p>
    <p>प्रिंट तिथि: <span id="printDate"></span></p>
  </div>

  <div id="log" class="show"></div>

  <script>
    const log = document.getElementById('log');
    const watermark = document.getElementById('watermark');
    
    function logMessage(msg, type = 'info') {
      const colors = { info: '#fff', success: '#4ade80', warn: '#fbbf24', error: '#f87171' };
      log.innerHTML += `<p style="color: ${colors[type]}">[${new Date().toLocaleTimeString()}] ${msg}</p>`;
      log.scrollTop = log.scrollHeight;
    }
    
    function beforePrint() {
      logMessage('🖨 onbeforeprint इवेंट ट्रिगर हुआ - प्रिंट तैयारी शुरू', 'info');
      
      // बैकग्राउंड बदलें (प्रिंट के लिए सफेद)
      document.body.style.background = 'white';
      document.body.style.backgroundImage = 'none';
      
      // वॉटरमार्क दिखाएं
      watermark.style.display = 'block';
      
      // प्रिंट तिथि सेट करें
      document.getElementById('printDate').textContent = new Date().toLocaleString();
      
      logMessage('✓ बैकग्राउंड सफेद किया गया, वॉटरमार्क जोड़ा गया', 'success');
    }
    
    function afterPrint() {
      logMessage('🖨 onafterprint इवेंट ट्रिगर हुआ - प्रिंट पूरा', 'info');
      
      // मूल स्टाइल पुनर्स्थापित करें
      document.body.style.background = '';
      document.body.style.backgroundImage = '';
      
      // वॉटरमार्क छिपाएं
      watermark.style.display = 'none';
      
      logMessage('✓ मूल स्टाइल पुनर्स्थापित', 'success');
    }
    
    function simulatePrint() {
      // मैन्युअल इवेंट ट्रिगर (टेस्टिंग के लिए)
      beforePrint();
      setTimeout(afterPrint, 1000);
    }
  </script>
</body>
</html>

आउटपुट (Output)

प्रिंट करने से पहले (Ctrl+P):

प्रिंट डायलॉग/पूर्वावलोकन में (वॉटरमार्क और सफेद बैकग्राउंड के साथ):

प्रिंट पूरा होने के बाद (मूल स्टाइल पुनर्स्थापित):

उपयोग के मामले

1. प्रिंट स्टाइलशीट स्विचिंग: प्रिंट के लिए अलग CSS लागू करना।
2. वॉटरमार्क/हेडर/फूटर: गोपनीयता नोटिस, पेज नंबर, कंपनी लोगो जोड़ना।
3. संवेदनशील डेटा छिपाना: प्रिंट से पहले पासवर्ड, टोकन, व्यक्तिगत जानकारी मास्क करना।
4. लेआउट समायोजन: कॉलम छिपाना, फॉन्ट आकार बदलना, पेज ब्रेक डालना।
5. एनालिटिक्स: प्रिंट इवेंट ट्रैक करना।

संबंधित इवेंट्स

ब्राउज़र समर्थन

• Chrome 63+, Firefox 6+, Safari 13+, Edge 79+
• IE/पुराने ब्राउज़र: समर्थन नहीं (पॉलीफिल आवश्यक)
• नोट: कुछ ब्राउज़र में, प्रिंट पूर्वावलोकन खुलने पर onbeforeprint फायर होता है, वास्तविक प्रिंटिंग पर नहीं।

सर्वोत्तम प्रथाएं

• हमेशा onafterprint में परिवर्तनों को वापस करें (उपयोगकर्ता प्रिंट रद्द कर सकता है)।
• जटिल स्टाइलिंग के लिए CSS @media print पसंद करें (अधिक मजबूत)।
• DOM परिवर्तनों को न्यूनतम और तेज़ रखें।
• विभिन्न ब्राउज़रों/ओएस में टेस्ट करें (व्यवहार भिन्न होता है)।