अपने PDF में पेज नंबर, दिनांक और शीर्षक कैसे जोड़ें

यदि आप कोई रेसिपी (recipe) सेव कर रहे हैं, तो एक साधारण स्क्रीनशॉट ठीक है।

लेकिन यदि आप कानूनी सबूत (legal evidence), शैक्षणिक शोध, या व्यावसायिक रिकॉर्ड के लिए कोई वेबपेज सेव कर रहे हैं, तो एक साधारण फोटो काफी नहीं है। आपको संदर्भ (context) की आवश्यकता है। आपको यह सटीक रूप से जानने की आवश्यकता है कि पृष्ठ कब सेव किया गया था, यह कहाँ से आया था, और आसान रेफरेंस के लिए पेज नंबर क्या हैं।

हमारे टूल में एक प्रोफेशनल "Header & Footer" इंजन इन-बिल्ट है। यह आपको अपने PDF के प्रत्येक पेज पर यह जानकारी अपने आप डालने (inject) की अनुमति देता है।

यहाँ बताया गया है कि इसका उपयोग कैसे करें, साथ ही कुछ कॉपी-पेस्ट टेम्प्लेट भी दिए गए हैं जिनका आप अभी उपयोग कर सकते हैं।

यह कैसे काम करता है

हमारे टूल के "Advanced Settings" सेक्शन में, आपको दो टेक्स्ट बॉक्स मिलेंगे:

1. Header HTML (प्रत्येक पेज के सबसे ऊपर दिखाई देता है)
2. Footer HTML (प्रत्येक पेज के सबसे नीचे दिखाई देता है)

आप यहाँ स्टैंडर्ड HTML लिख सकते हैं, लेकिन असली जादू हमारे स्पेशल CSS क्लासेज (Special CSS Classes) का उपयोग करने से आता है। यदि आप इन विशिष्ट क्लास नामों का उपयोग करते हैं, तो हमारा कनवर्टर अपने आप उन्हें सही डेटा से भर देगा:

• <span class='date'></span> → वर्तमान प्रिंट की तारीख डालता है।
• <span class='title'></span> → वेबपेज का शीर्षक डालता है।
• <span class='url'></span> → सोर्स URL डालता है।
• <span class='pageNumber'></span> → वर्तमान पेज नंबर डालता है।
• <span class='totalPages'></span> → पेजों की कुल संख्या डालता है।

3 कॉपी-और-पेस्ट टेम्प्लेट

हमने इन्हें "बुलेटप्रूफ" रॉ CSS (style="...") का उपयोग करके लिखा है ताकि वे बाहरी स्टाइलशीट की आवश्यकता के बिना PDF इंजन में पूरी तरह से काम करें।

1. "साधारण पेज नंबर" (Footer)

यह क्लासिक है। यह प्रत्येक पेज के नीचे एक छोटी, केंद्रित (centered) पेज संख्या डालता है।

इसे "Footer HTML" में पेस्ट करें:

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

2. "आर्काइव" फुटर (कानूनी/शोध के लिए)

सबूत कैप्चर करने के लिए बिल्कुल सही। यह बाईं ओर सोर्स URL और दाईं ओर सेव करने की तारीख दिखाता है।

इसे "Footer HTML" में पेस्ट करें:

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">Source: <span class="url"></span></span>
  <span style="float: right;">Saved: <span class="date"></span></span>
</div>

3. "प्रोफेशनल रिपोर्ट" हेडर

यह आपके वेब कैप्चर को एक आधिकारिक दस्तावेज़ जैसा बनाता है। यह बाईं ओर शीर्षक को बोल्ड में और दाईं ओर दिनांक को रखता है।

इसे "Header HTML" में पेस्ट करें:

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

महत्वपूर्ण टिप्स

1. ⚠️ आपको मार्जिन सेट करना होगा: हेडर और फुटर पेज मार्जिन के अंदर प्रिंट होते हैं। यदि आपका मार्जिन "0" पर सेट है, तो आपका हेडर दिखाई नहीं देगा! इन टेम्प्लेट्स को दिखाने के लिए आपको ऊपर (Top) और नीचे (Bottom) के मार्जिन को कम से कम 0.4in (या 10mm) पर सेट करना होगा।
2. फ़ॉन्ट आकार: PDF इंजन फ़ॉन्ट आकार को स्क्रीन की तुलना में अलग तरह से मानता है। हम 8px से 10px का उपयोग करने की सलाह देते हैं। इससे छोटा कुछ भी गायब हो सकता है।

लेवल अप करने के लिए तैयार हैं? हेडर में महारत हासिल करना सिर्फ एक कदम है। प्रोफेशनल दस्तावेज़ बनाने के बारे में और सुझावों के लिए, परफेक्ट वेबपेज PDF बनाने के लिए अल्टीमेट गाइड देखें।