HTML to PDF

तीन चरणों में HTML से PDF कैसे बनाएँ

पहला चरण: मार्कअप पेस्ट करें या सहेजी .html फ़ाइल इंपोर्ट करें। मार्कअप इस पेज से अलग अपने फ्रेम में सजता है, ताकि शैलियाँ आपस में न घुलें। फ़ाइल ड्रैग और ड्रॉप करें या डिवाइस से चुनने हेतु क्लिक करें।

दूसरा चरण: प्रीव्यू में दिखावट पक्की करें। ब्राउज़र रेंडर करता है, फिर फ़ाइनल PDF का हर पेज उस रेंडर की PNG तस्वीर बनता है — अंतिम आकार से दोगुने पर, लगभग 144 dpi। स्क्रीन और ऑफिस प्रिंटर हेतु पर्याप्त; व्यावसायिक छपाई में पिक्सेल दिखने लगते हैं।

तीसरा चरण: डाउनलोड क्लिक करके PDF सीधे मेमोरी से सहेजें। टूल मुफ़्त और सुरक्षित है — बिना इंस्टॉलेशन, बिना रजिस्ट्रेशन — और आपका HTML यह टैब कभी नहीं छोड़ता। पहले ही जान लें: टेक्स्ट चुना नहीं जा सकता, Ctrl+F कुछ नहीं पाता, स्क्रीन रीडर को कुछ नहीं मिलता।

तस्वीर कब सही जवाब बनती है

खँगाले जाने वाले अनुबंध हेतु रास्टराइज़ेशन बुरा विचार है। जब पेज की दिखावट ही मुद्दा हो, तब यही सही है।

मार्कअप चिपकाना फ़ाइल खोलने जैसा नहीं

इंपोर्ट .html बटन उस फ़ाइल का सिर्फ़ टेक्स्ट पढ़ता है। बगल की स्टाइलशीट, ./images का लोगो, ./fonts का वेब फ़ॉन्ट — कुछ साथ नहीं आता, क्योंकि ब्राउज़र बाकी डिस्क वेबपेज के हवाले नहीं करता।

सापेक्ष पथ चुपचाप विफल होते हैं। मार्कअप यहाँ रेंडर होता है, फ़ाइल वाले फ़ोल्डर में नहीं, इसलिए src="logo.png" oxygenpdf.com के सापेक्ष सुलझकर कुछ नहीं पाता। निरपेक्ष https:// URL तभी लोड होते हैं जब सर्वर CORS हेडर लौटाए।

स्क्रिप्ट कभी नहीं चलतीं। इस तरह जोड़ा मार्कअप स्क्रिप्ट टैग नहीं चलाता, इसलिए ब्राउज़र से सहेजा एकल-पेज ऐप लगभग खाली दिखता है — सहेजा खोल है, रेंडर परिणाम नहीं। एलिमेंट इंस्पेक्टर से जीवित DOM कॉपी करके पेस्ट करें। भरोसे से वही आता है जो आत्मनिर्भर हो: फ़ाइल के अंदर स्टाइल ब्लॉक, इनलाइन एट्रिब्यूट और data URI तस्वीरें।

तुलना

HTML को PDF में डालने के तीन तरीके, हर एक की कमियों सहित।

क्या टिकता है, और पेज कहाँ कटता है

रंग, ग्रेडिएंट, बॉर्डर, गोल कोने, बॉक्स शैडो, ओपेसिटी, CSS ट्रांसफ़ॉर्म, टेक्स्ट शैडो, टेबल, सूचियाँ, इनलाइन SVG — सब साथ आते हैं। रेंडरर हर बॉक्स खुद खींचता है, OS से स्क्रीनशॉट नहीं माँगता, इसलिए बिना सीधे समतुल्य वाले कुछ नए प्रभाव चुपचाप छूटते हैं: फ़िल्टर और blur(), mix-blend-mode, backdrop-filter, clip-path, मास्क।

मार्कअप लगभग 515 पिक्सेल चौड़े व्यूपोर्ट में सजता है, यानी CSS पिक्सेल में A4 कंटेंट चौड़ाई। रेस्पॉन्सिव पेज सँकरे ब्रेकपॉइंट पर रेंडर होते हैं; @media (min-width: 768px) कभी सक्रिय नहीं होता। 768 पिक्सेल से ऊपर ही सही दिखने वाला लेआउट यहाँ सही नहीं दिखेगा।

लंबी तस्वीर पेज-ऊँचाई के टुकड़ों में निश्चित अंतराल पर कटती है। कटाई यांत्रिक है, नीचे की सामग्री नहीं देखती — टेबल पंक्ति या शीर्षक आधा इस पेज, आधा अगले पर उतर सकता है। CSS page-break-inside मदद नहीं करता; अटपटे एलिमेंट अतिरिक्त मार्जिन या खाली स्पेसर से सीमा पार धकेलें। हर पेज में लगभग 762 पॉइंट सामग्री समाती है।

आपका HTML यह टैब कभी नहीं छोड़ता

हर सर्वर-साइड कन्वर्टर को मार्कअप अपनी मशीन पर चाहिए — फ़ॉर्म में पेस्ट करके अपलोड करें, या URL दें जिसका क्रॉलर पेज लाए। लॉगिन-पीछे सामग्री हेतु दूसरे तरीके में क्रेडेंशियल भी सौंपने होते हैं। ग्राहक नामों वाली स्क्रीन या अरिलीज़्ड स्टेजिंग बिल्ड हेतु दोनों सौदे असुविधाजनक हैं।

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