HTML को PDF में कैसे कनवर्ट करें

HTML से PDF बनाना चालान, रिपोर्ट, पत्र, प्रमाणपत्र, और किसी भी दस्तावेज़ को बनाने के लिए उपयोगी है जहाँ आप CSS के साथ लेआउट को नियंत्रित करना चाहते हैं लेकिन PDF के रूप में वितरित करना चाहते हैं। एक ब्राउज़र-आधारित HTML-से-PDF कनवर्टर आपके अपने ब्राउज़र के रेंडरिंग इंजन का उपयोग करता है, इसलिए परिणाम वैसा ही होता है जैसा आप लाइव पूर्वावलोकन में देखते हैं, बिना सर्वर अपलोड के।

HTML को PDF में कैसे बदलें

1. अपना HTML पेस्ट करें: एडिटर में अपना HTML कोड दर्ज करें, जिसमें कोई इनलाइन CSS या <style> टैग शामिल हों। कोड में हेडर, टेबल, छवियाँ, और स्टाइलिंग के साथ पूरा पेज स्ट्रक्चर शामिल हो सकता है।
2. आउटपुट का पूर्वावलोकन करें: एक लाइव पूर्वावलोकन ठीक से दिखाता है कि जब आप टाइप करते हैं तो आपका PDF कैसा दिखेगा। अपना HTML और CSS तब तक समायोजित करें जब तक पूर्वावलोकन आपकी इच्छानुसार न हो जाए।
3. जेनरेट करें और डाउनलोड करें: अपने ब्राउज़र में PDF बनाने के लिए जेनरेट बटन पर क्लिक करें, फिर इसे तुरंत डाउनलोड करें।

आप क्या बना सकते हैं

• चालान और रसीदें: कंपनी ब्रांडिंग, लाइन आइटम और कुल के साथ संरचित टेबल
• रिपोर्ट: शीर्षक, अनुच्छेद, चार्ट और डेटा टेबल के साथ स्वरूपित दस्तावेज़
• प्रमाणपत्र: कस्टम फॉन्ट, बॉर्डर और केंद्रित पाठ के साथ शैलीबद्ध लेआउट
• पत्र: हेडर, बॉडी और हस्ताक्षर क्षेत्रों के साथ पेशेवर पत्राचार
• रिज्यूम: नौकरी आवेदनों के लिए स्वच्छ PDF के रूप में निर्यात किए जाने वाले डिज़ाइन किए गए लेआउट
• टिकट और इवेंट पास: उपस्थित जानकारी के साथ संरचित QR-कोड ब्लॉक
• शिपिंग लेबल: डाक वाहकों के लिए मानकीकृत प्रारूप
• बोर्डिंग पास और पुष्टि: ऑनलाइन बुकिंग के प्रिंट-और-लाओ संस्करण
• आमंत्रण: छवियों, फॉन्ट और सजावटी बॉर्डर के साथ शैलीबद्ध कार्ड

HTML-से-PDF रूपांतरण का संक्षिप्त इतिहास

शुरुआती वेब (1995-2005) में, HTML से PDF बनाने के लिए सर्वर-साइड टूल की आवश्यकता थी: Apache FOP (1999), PrinceXML (2002), या wkhtmltopdf (2010), जो सभी एक बैकएंड सर्वर पर चलते थे और सामग्री अपलोड करने की आवश्यकता होती थी। आउटपुट गुणवत्ता बहुत भिन्न होती थी क्योंकि प्रत्येक रेंडरिंग इंजन CSS को अलग तरह से लागू करता था।

2014 में jsPDF और html2pdf.js जैसी लाइब्रेरीयों के साथ ब्राउज़र-साइड रूपांतरण व्यावहारिक हो गया, जो सामग्री को रास्टराइज़ करने के लिए HTML5 Canvas का उपयोग करते हैं। साधारण दस्तावेज़ों के लिए परिणाम ठीक था लेकिन जटिल लेआउट और चयन योग्य पाठ पर विफल रहा।

सफलता Chromium का हेडलेस मोड (2017) था, जिसने वही रेंडरिंग इंजन उजागर किया जो Chrome सामान्य पेजों के लिए उपयोग करता है। Puppeteer (Node.js, 2017) ने डेवलपर्स को सर्वर-साइड Chromium PDF जनरेशन सुलभ बनाया। ब्राउज़र-आधारित कनवर्टर अब @page CSS नियमों के साथ Print API (window.print()) का उपयोग करते हैं, वही पथ जिसे Chromium का हेडलेस मोड उपयोग करता है, पूर्वावलोकन और PDF के बीच समान आउटपुट देता है।

2026 में, अधिकांश दस्तावेज़ों के लिए ब्राउज़र-आधारित HTML-से-PDF सही विकल्प है। सर्वर-साइड रेंडरिंग केवल बहुत बड़े दस्तावेज़ों (100+ पेज), स्वचालित बैच प्रोसेसिंग, या जब आपको कई स्रोतों से PDF मर्ज करने की आवश्यकता हो, के लिए समझ में आता है।

PDF आउटपुट के लिए स्टाइलिंग सुझाव

इनलाइन स्टाइल या <style> टैग का उपयोग करें: बाहरी स्टाइलशीट लोड नहीं होते। अपना सभी CSS या तो तत्वों पर इनलाइन या HTML में <style> ब्लॉक में रखें।

पेज मार्जिन सेट करें: अपनी PDF में सामग्री के चारों ओर सफेद स्थान को नियंत्रित करने के लिए CSS @page { margin: 20mm; } का उपयोग करें।

प्रिंट-अनुकूल इकाइयों का उपयोग करें: mm, cm, और pt PDF में px या rem की तुलना में अधिक अनुमानित हैं। उन मार्जिन और रिक्ति के लिए mm का उपयोग करें जिन्हें वास्तविक-दुनिया आयामों से मेल खाने की आवश्यकता है।

व्यूपोर्ट-निर्भर लेआउट से बचें: प्रतिशत चौड़ाई और निश्चित पिक्सेल चौड़ाई सबसे अच्छा काम करती हैं। व्यूपोर्ट इकाइयाँ (vw, vh) PDF आउटपुट में अपेक्षानुसार व्यवहार नहीं कर सकती हैं।

पेज ब्रेक नियंत्रित करें: नए पेज कहाँ शुरू होते हैं इसे नियंत्रित करने के लिए page-break-before, page-break-after, और page-break-inside (या नए break-before, break-after, break-inside) का उपयोग करें। break-inside: avoid एक एकल ब्लॉक को पेजों में विभाजित होने से रोकता है।

केवल-PDF नियमों के लिए @media print का उपयोग करें: @media print { ... } के अंदर कोई भी CSS केवल PDF जेनरेट करते समय लागू होता है, पूर्वावलोकन में नहीं। नेविगेशन बार जैसे केवल-स्क्रीन तत्वों को छिपाने के लिए उपयोगी।

CSS प्रिंट-मोड उदाहरण

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

पेज आकार

सामान्य @page size मान:

• A4 (210 × 297 mm) - अमेरिका के बाहर वैश्विक डिफ़ॉल्ट
• letter (8.5 × 11 in) - अमेरिकी डिफ़ॉल्ट
• legal (8.5 × 14 in) - अमेरिकी कानूनी दस्तावेज़
• A3 (297 × 420 mm) - पोस्टर, योजनाएँ
• A5 (148 × 210 mm) - पुस्तिकाएँ, पैम्फलेट
• कस्टम: किसी भी आयाम के लिए size: 100mm 150mm

लैंडस्केप अभिविन्यास के लिए landscape जोड़ें: size: A4 landscape।

सामान्य कठिनाइयाँ

• बाहरी फॉन्ट लोड नहीं होते: बाहरी CDN पर होस्ट किए गए वेब फॉन्ट एम्बेड नहीं हो सकते हैं। <style> टैग के अंदर base64-एन्कोडेड फ़ॉन्ट फ़ाइल के साथ @font-face का उपयोग करें, या सिस्टम फ़ॉन्ट (Helvetica, Times, Arial, Courier) पर बने रहें।
• छवियाँ धीरे लोड होती हैं या बिल्कुल नहीं: PDF जेनरेट होने पर बाहरी छवियाँ तैयार नहीं हो सकती हैं। गारंटीकृत समावेशन के लिए base64 डेटा URI का उपयोग करें: <img src="data:image/png;base64,iVBORw0KGgoAAAA...">।
• प्रिंट पर पृष्ठभूमि रंग हटा दिए जाते हैं: ब्राउज़र स्याही बचाने के लिए डिफ़ॉल्ट रूप से प्रिंट के लिए पृष्ठभूमि रंग और छवियों को हटा देते हैं। अपने बॉडी या विशिष्ट तत्वों में -webkit-print-color-adjust: exact; print-color-adjust: exact; जोड़ें।
• CSS Grid लेआउट टूट रहे हैं: पुराने PDF इंजन CSS Grid का पूरी तरह से समर्थन नहीं करते हैं। लाइव पूर्वावलोकन के साथ परीक्षण करें; यदि Grid अप्रत्याशित परिणाम देता है तो table या Flexbox पर वापस जाएँ।
• तालिका पंक्ति के बीच में पेज ब्रेक: पंक्तियों को एक साथ रखने के लिए tr { page-break-inside: avoid; } का उपयोग करें, या प्रत्येक पेज पर तालिका हेडर को दोहराने के लिए thead { display: table-header-group; }।
• पिक्सेल आकार भौतिक आयामों से मेल नहीं खाते: प्रिंट करते समय 1 CSS px = 1/96 इंच। तो width: 96px बॉक्स PDF में बिल्कुल 1 इंच चौड़ा है। स्पष्ट भौतिक आकार के लिए mm या pt का उपयोग करें।
• हाइपरलिंक रंग खो देते हैं: PDF अपने CSS-परिभाषित रंग के साथ <a> टैग को रेंडर करते हैं। यदि आप काला पाठ लेकिन कार्यात्मक हाइपरलिंक चाहते हैं, तो color: black का उपयोग करें और PDF रीडर के अंडरलाइन विज़ुअल को लिंक का संकेत देने दें।

विचार करने योग्य विकल्प

• ब्राउज़र से सीधे PDF में प्रिंट करें (Ctrl/Cmd+P, फिर «PDF के रूप में सहेजें»): शून्य सेटअप, किसी भी वेब पेज के लिए काम करता है जिसे आप खोल सकते हैं। एक-बार रूपांतरण के लिए सर्वोत्तम।
• सर्वर-साइड रेंडरिंग (Puppeteer, Playwright, PrinceXML): बैच जेनरेशन, स्वचालन, या बहुत बड़े दस्तावेज़ों के लिए। विकास सेटअप की आवश्यकता है।
• Markdown से PDF: यदि आप Markdown में लिखते हैं, तो समर्पित उपकरण (Pandoc, Marp, Typora) बिना HTML मचान के एक चरण में रूपांतरण को संभालते हैं।
• दस्तावेज़ टेम्पलेटिंग (DocRaptor, Tectonic, LaTeX): अत्यधिक टाइप किए गए दस्तावेज़ों (अकादमिक पेपर, किताबें) के लिए जहाँ आपको कर्निंग, लिगचर, गणित पर सटीक नियंत्रण की आवश्यकता है।

दैनिक व्यावसायिक दस्तावेज़ों (चालान, रिपोर्ट, प्रमाणपत्र) के लिए, एक ब्राउज़र HTML-से-PDF कनवर्टर तेज़ और बराबर परिष्कृत है।

सुझाव

• पहले पूर्वावलोकन करें: जेनरेट करने से पहले हमेशा लाइव पूर्वावलोकन की जाँच करें। हर बार नया PDF जेनरेट करने की तुलना में HTML पर पुनरावृत्ति करना बहुत तेज़ है।
• छवियों के लिए base64 का उपयोग करें: PDF में गारंटीकृत समावेशन के लिए छवियों को base64 डेटा URI में परिवर्तित करें। बाहरी URL CORS प्रतिबंधों के कारण विफल हो सकते हैं।
• इसे सरल रखें: जटिल CSS लेआउट (नेस्टेड ग्रिड, ओवरलैपिंग पोज़िशन तत्व) पूरी तरह से रेंडर नहीं हो सकते। सरल लेआउट अधिक विश्वसनीय PDF उत्पन्न करते हैं।
• पेज ब्रेक का परीक्षण करें: बहु-पेज दस्तावेज़ों के लिए, नए पेज कहाँ शुरू होते हैं इसे नियंत्रित करने के लिए page-break-before: always का उपयोग करें।
• प्रिंट-मोड CSS: अपने अंतिम स्टाइल को @media print { ... } में लपेटें ताकि वे केवल जेनरेट किए गए PDF पर लागू हों, पूर्वावलोकन पर नहीं। स्क्रीन UI तत्वों को छिपाने के लिए उपयोगी।
• सिमेंटिक HTML का उपयोग करें: <h1>, <h2>, <p>, <table> हर जगह <div> की तुलना में स्वच्छ सुलभ PDF उत्पन्न करते हैं। जब उपयोगकर्ता PDF खोलता है तो स्क्रीन रीडर उन्हें सही ढंग से पार्स करते हैं।

गोपनीयता और गोपनीय दस्तावेज़

HTML-से-PDF कनवर्टर पूरी तरह से आपके ब्राउज़र में चलता है। आप जो HTML पेस्ट करते हैं, जो छवियाँ एम्बेड करते हैं, और जो PDF जेनरेट होता है वे सभी आपके डिवाइस पर रहते हैं। कुछ भी सर्वर पर अपलोड, लॉग या किसी के साथ साझा नहीं किया जाता है।

यह मायने रखता है क्योंकि HTML-से-PDF इनपुट अक्सर संवेदनशील होते हैं: ग्राहक नामों के साथ चालान डेटा, मूल्य निर्धारण शर्तों के साथ अनुबंध मसौदे, वित्तीय आँकड़ों के साथ आंतरिक रिपोर्ट, व्यक्तिगत जानकारी के साथ प्रमाणपत्र। क्लाउड HTML-से-PDF सेवाएँ डिज़ाइन द्वारा आपके HTML को अपने सर्वर पर भेजती हैं, वहाँ PDF जेनरेट करती हैं, और वापस भेजती हैं। कुछ «सुधार» या एनालिटिक्स के लिए इनपुट बनाए रखते हैं। गोपनीय जानकारी वाले दस्तावेज़ों के लिए, एक ब्राउज़र-आधारित कनवर्टर सुरक्षित विकल्प है।

ब्राउज़र-आधारित रूपांतरण पृष्ठ लोड होने के बाद ऑफ़लाइन भी काम करता है, और HTML पर पुनरावृत्ति करते समय तत्काल प्रतिक्रिया के लिए पर्याप्त तेज़ है।