HTML onafterprint इवेंट एट्रिब्यूट: प्रिंट पूरा होने पर कार्रवाई

HTML onafterprint इवेंट एट्रिब्यूट तब ट्रिगर होता है जब प्रिंट डायलॉग बंद हो जाता है (चाहे उपयोगकर्ता प्रिंट करे या रद्द करे)। यह onbeforeprint में किए गए परिवर्तनों को वापस करने, प्रिंट पूर्णता लॉग करने, या प्रिंट-पश्चात कार्रवाई करने के लिए उपयोगी है।

सिंटैक्स (Syntax)

<tagname onafterprint="script"></tagname>

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

उदाहरण (Example)

यह उदाहरण onbeforeprint और onafterprint दोनों का उपयोग करके पूर्ण प्रिंट जीवनचक्र प्रदर्शित करता है।

<!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: all 0.3s ease;
    }
    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-header, .print-footer {
      display: none;
      text-align: center;
      padding: 1rem;
      font-weight: bold;
      color: #db133a;
      border: 2px dashed #db133a;
      margin: 1rem;
    }
    @media print {
      .watermark, .print-header, .print-footer { display: block !important; }
      body { background: white !important; background-image: none !important; }
      .no-print { display: none !important; }
    }
    .btn {
      background: #db133a;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
      font-size: 1rem;
      margin: 0.5rem;
    }
    .log-entry {
      padding: 0.5rem;
      margin: 0.25rem 0;
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.9rem;
    }
    .log-before { background: rgba(34, 116, 165, 0.3); border-left: 3px solid #2274A5; }
    .log-after { background: rgba(35, 206, 107, 0.3); border-left: 3px solid #23CE6B; }
    .log-action { background: rgba(219, 19, 58, 0.3); border-left: 3px solid #db133a; }
  </style>
</head>
<body onbeforeprint="handleBeforePrint()" onafterprint="handleAfterPrint()">
  <div class="watermark" id="watermark">आंतरिक उपयोग</div>
  <div class="print-header">📄 प्रिंट हेडर - गोपनीय दस्तावेज़</div>
  
  <h1>HTML onafterprint इवेंट एट्रिब्यूट डेमो</h1>
  <p>मैं कुछ डमी टेक्स्ट के साथ एक पैराग्राफ HTML एलिमेंट हूँ।</p>
  <p style="color:#db133a;">अब इस दस्तावेज़ को प्रिंट करने का प्रयास करें (Ctrl+P)।</p>
  
  <div class="no-print">
    <button class="btn" onclick="window.print()">प्रिंट डायलॉग खोलें</button>
    <button class="btn" onclick="simulatePrintCycle()">प्रिंट चक्र सिमुलेट करें</button>
    <button class="btn" style="background: #666;" onclick="clearLog()">लॉग साफ़ करें</button>
  </div>
  
  <div class="print-footer">📄 प्रिंट फूटर - पेज 1 / 1</div>

  <div id="log" style="max-height: 200px; overflow-y: auto; margin-top: 1rem; text-align: left;"></div>

  <script>
    const log = document.getElementById('log');
    const watermark = document.getElementById('watermark');
    let printState = 'तैयार';
    
    function addLogEntry(message, type = 'action') {
      const entry = document.createElement('div');
      entry.className = `log-entry log-${type}`;
      entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
      log.insertBefore(entry, log.firstChild);
      
      // केवल अंतिम 20 एंट्री रखें
      while (log.children.length > 20) {
        log.removeChild(log.lastChild);
      }
    }
    
    function handleBeforePrint() {
      printState = 'प्रिंटिंग...';
      addLogEntry('🖨 onbeforeprint फायर - प्रिंट तैयारी', 'before');
      
      // प्रिंट-विशिष्ट परिवर्तन
      document.body.style.background = 'white';
      document.body.style.backgroundImage = 'none';
      watermark.style.display = 'block';
      
      addLogEntry('✓ स्टाइल बदला: सफेद बैकग्राउंड, वॉटरमार्क दिखाया', 'before');
    }
    
    function handleAfterPrint() {
      addLogEntry('🖨 onafterprint फायर - प्रिंट डायलॉग बंद', 'after');
      
      // मूल स्थिति पुनर्स्थापित (चाहे प्रिंट हुआ हो या रद्द)
      document.body.style.background = '';
      document.body.style.backgroundImage = '';
      watermark.style.display = 'none';
      printState = 'तैयार';
      
      addLogEntry('✓ मूल स्टाइल पुनर्स्थापित', 'after');
    }
    
    function simulatePrintCycle() {
      addLogEntry('🔄 मैन्युअल सिमुलेशन शुरू', 'action');
      handleBeforePrint();
      setTimeout(() => {
        addLogEntry('⏱ उपयोगकर्ता ने प्रिंट डायलॉग बंद किया (सिमुलेटेड)', 'action');
        handleAfterPrint();
      }, 1500);
    }
    
    function clearLog() {
      log.innerHTML = '';
      addLogEntry('🗑 लॉग साफ़ किया गया', 'action');
    }
    
    // प्रारंभिक लॉग
    addLogEntry('📄 पेज लोड हुआ - प्रिंट करने के लिए तैयार', 'action');
  </script>
</body>
</html>

आउटपुट (Output)

प्रिंट डायलॉग खोलने पर (Ctrl+P):

प्रिंट डायलॉग बंद करने के बाद (रद्द या प्रिंट):

महत्वपूर्ण व्यवहार नोट्स

कब फायर होता है?

• उपयोगकर्ता प्रिंट डायलॉग में "प्रिंट" क्लिक करता है → onafterprint प्रिंट जॉब स्पूल होने के बाद फायर होता है।
• उपयोगकर्ता "रद्द करें" क्लिक करता है → onafterprint तुरंत फायर होता है।
• प्रोग्रामेटिक window.print() → दोनों इवेंट्स फायर होते हैं।

ब्राउज़र अंतर

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

1. हमेशा जोड़े में उपयोग करें: onbeforeprint सेटअप करता है, onafterprint सफाई करता है।
2. रद्दीकरण संभालें: onafterprint रद्दीकरण पर भी फायर होता है, इसलिए सफाई कोड वहां रखें।
3. CSS @media print पसंद करें: स्टाइलिंग के लिए, CSS अधिक विश्वसनीय है और JavaScript पर निर्भर नहीं करता।
4. स्थिति ट्रैक करें: यदि प्रिंट के बीच ओवरलैप संभव है तो एक फ्लैग का उपयोग करें।

उन्नत पैटर्न: प्रिंट प्रॉमिस रैपर

function printWithLifecycle() {
  return new Promise((resolve) => {
    const afterPrintHandler = () => {
      window.removeEventListener('afterprint', afterPrintHandler);
      resolve();
    };
    window.addEventListener('afterprint', afterPrintHandler);
    window.print();
  });
}

// उपयोग:
await printWithLifecycle();
console.log('प्रिंट डायलॉग बंद हुआ');

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

Chrome 63+, Firefox 6+, Safari 13+, Edge 79+। मोबाइल ब्राउज़र में सीमित/कोई समर्थन नहीं।