HTML से PDF क्या है?

HTML मार्कअप को डाउनलोड करने योग्य PDF में बदलता है। CSS स्टाइल, चित्र, टेबल और कस्टम पेज साइज़ को सपोर्ट करता है। चालान, रिपोर्ट या फ़ॉर्मेट किए गए वेब कंटेंट को ऑफ़लाइन सहेजने के लिए उपयोगी है।

पेपर साइज़ में A4, A3, Letter या Legal चुनिए, ओरिएंटेशन portrait/landscape बदलिए, और मार्जिन 0 से 20 mm तक सेट कीजिए। ज़रूरत हो तो फ़ाइल को पासवर्ड से लॉक कीजिए या फ़ुटर में पेज नंबर लगाइए। इनलाइन CSS, base64 इमेज और टेबल — सब आउटपुट में रेंडर हो जाते हैं। कन्वर्ज़न html2pdf.js + html2canvas पर चलता है, इसलिए वेबफ़ॉन्ट या जटिल CSS वाले पेज लाइव प्रीव्यू और PDF में थोड़े अलग दिख सकते हैं।

उपयोग कैसे करें

1. चरण 1 — एडिटर में अपना HTML कंटेंट पेस्ट करें या टाइप करें। लाइव प्रिव्यू दिखाता है कि PDF बिल्कुल कैसा दिखेगा।
2. चरण 2 — पेज सेटिंग्स कॉन्फ़िगर करें: पेपर साइज़ (A4, A3, लेटर, लीगल), ओरिएंटेशन (पोर्ट्रेट/लैंडस्केप) और मार्जिन चुनें। चाहें तो पासवर्ड सेट करें या पेज नंबर जोड़ें।
3. चरण 3 — दस्तावेज़ बनाने के लिए 'PDF जनरेट करें' पर क्लिक करें, फिर इसे सीधे अपने डिवाइस पर डाउनलोड करें।

कब उपयोग करें

• क्लाइंट को मेल भेजने से पहले HTML इनवॉइस या रसीद टेम्पलेट को PDF में बदलना।
• ग्राफ़ और टेबल वाले रिपोर्ट को पोर्टेबल आर्काइव कॉपी की तरह सहेजना।
• वर्कशॉप या क्लास के लिए वेब कंटेंट से प्रिंट-रेडी हैंडआउट तैयार करना।

परिणाम

एक फ्रीलांसर कंपनी लोगो, आइटमाइज़्ड टेबल और टोटल के साथ अपना इनवॉइस HTML पेस्ट करता है। वे 20mm मार्जिन के साथ A4 पोर्ट्रेट सेट करते हैं और क्लाइंट को ईमेल करने के लिए एक प्रोफेशनल PDF डाउनलोड करते हैं।

अक्सर पूछे जाने वाले प्रश्न

PDF और लाइव प्रीव्यू थोड़े अलग क्यों दिखते हैं?

PDF html2canvas के ज़रिए बनता है, जो पहले पेज को एक इमेज में पेंट करता है और फिर उसे PDF में लपेट देता है। वेबफ़ॉन्ट जो पूरा लोड न हुआ हो, position: fixed एलिमेंट या CSS फ़िल्टर—इन सबकी वजह से थोड़ी फ़र्क़ दिख सकती है।

क्या किसी और डोमेन पर रखी इमेज शामिल कर सकते हैं?

तभी जब वह सर्वर खुली CORS हेडर भेजता हो। नहीं भेजेगा तो html2canvas पिक्सल नहीं पढ़ पाएगा और PDF में वहाँ ख़ाली जगह दिखेगी। समाधान: इमेज डाउनलोड करके base64 में एम्बेड करें, या उसे उसी ओरिजिन से सर्व करें।

पेज ब्रेक कैसे कंट्रोल करें?

जिस एलिमेंट से नया पेज शुरू करना है उस पर CSS नियम page-break-before: always (या page-break-after) लगाइए। टेबल रो को टूटने से बचाने के लिए उस रो पर page-break-inside: avoid काम करता है।

क्या PDF का टेक्स्ट सेलेक्ट कर के कॉपी हो सकता है?

आम तौर पर नहीं। रेंडरर canvas से पूरे पेज को सपाट कर देता है, इसलिए टेक्स्ट बिटमैप बन जाता है। कुछ सॉल्यूशन सेलेक्शन के लिए ऊपर अदृश्य टेक्स्ट लेयर बिछाते हैं, लेकिन यह टूल रास्टराइज़्ड PDF देता है—पढ़ने लायक, पर हमेशा कॉपी नहीं किया जा सकता।

जो HTML पेस्ट करते हैं उसकी कोई साइज़ लिमिट है?

व्यवहार में कुछ सौ KB मार्कअप या 10-15 पेज तक ठीक चलता है। उससे ज़्यादा होने पर मेमोरी कम पड़ सकती है, क्योंकि पूरा DOM पहले एक बड़े canvas में रेंडर होता है और उसके बाद पेज में काटा जाता है।

संबंधित उपकरण