HTML से PDF

HTML पेस्ट करें, पृष्ठ आकार चुनें और PDF डाउनलोड करें, सब कुछ आपके ब्राउज़र में रेंडर होता है।

HTML से PDF कैसे काम करता है

HTML to PDF वह HTML markup लेता है जो आप एडिटर में पेस्ट करते हैं, उसे DOMPurify से स्वच्छ करके scripts और unsafe attributes हटाता है, उसे html2canvas का उपयोग करके एक off-screen canvas पर रेंडर करता है, और jsPDF से परिणाम को PDF में एन्कोड करता है। पूरी pipeline आपके ब्राउज़र टैब के अंदर चलती है; कोई HTML कोड या rendered आउटपुट किसी सर्वर को नहीं भेजा जाता। यह उन HTML snippets बदलने के लिए उपयुक्त है जिनमें व्यक्तिगत डेटा हो जो आप किसी ऑनलाइन सेवा में पेस्ट नहीं करना चाहेंगे।

इस पर भरोसा करने से पहले आउटपुट फॉर्मेट समझें। PDF पृष्ठ रास्टर इमेज हैं, vector टेक्स्ट नहीं। आउटपुट में टेक्स्ट सेलेक्टेबल नहीं है, सर्चेबल नहीं है, और reflow नहीं हो सकता। URL से संदर्भित बाहरी संसाधन जैसे इमेज ब्राउज़र CORS नीति द्वारा ब्लॉक होते हैं और लोड नहीं होंगे। Inline styles और embedded CSS काम करते हैं, लेकिन custom web fonts या advanced CSS grid वाले जटिल लेआउट सही तरह render नहीं हो सकते। पूरे वेब पेजों के document-faithful रूपांतरण के लिए, server-side चलने वाला headless browser अधिक उचित टूल है।

लिखा है Bastien Sulyan

HTML से PDF: चरण दर चरण उपयोग विधि

अपना HTML markup एडिटर क्षेत्र में पेस्ट करें।
वैकल्पिक रूप से पेज साइज़ (A4 या Letter) और ओरिएंटेशन समायोजित करें।
Convert पर क्लिक करें; DOMPurify HTML को स्वच्छ करता है और html2canvas उसे रेंडर करता है।
jsPDF के canvas आउटपुट को PDF पृष्ठों के रूप में एन्कोड करने की प्रतीक्षा करें।
PDF डाउनलोड करें।

सामान्य उपयोग के मामले

आपने ब्राउज़र में एक लोकल टेम्पलेट से HTML इनवॉइस जेनरेट किया है और इसे किसी कन्वर्शन सेवा को ईमेल किए बिना PDF कॉपी चाहते हैं।
API डेटा से बनी एक simple HTML रिपोर्ट को आर्काइव के लिए PDF के रूप में सहेजना है; HTML पेस्ट करें और लोकल रूप से बदलें।
आपने एक styled HTML email टेम्पलेट लिखा है और देखना चाहते हैं कि PDF के रूप में प्रिंट होने पर वह कैसी दिखेगी।
एक डेवलपर को testing के दौरान HTML fragment से त्वरित PDF चाहिए, बिना server-side headless browser सेट किए।

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

आउटपुट PDF में टेक्स्ट सेलेक्टेबल क्यों नहीं है?

रूपांतरण pipeline html2canvas का उपयोग करके HTML को एक canvas bitmap पर रेंडर करती है, फिर jsPDF के साथ PDF पृष्ठों के अंदर उस bitmap को image data के रूप में एन्कोड करती है। आउटपुट एक rasterised image है, टेक्स्ट लेयर नहीं। यदि आपको सेलेक्टेबल टेक्स्ट वाली PDF चाहिए, तो आपको Puppeteer जैसे server-side headless browser की आवश्यकता होगी, जिससे यह टूल प्रोसेसिंग को लोकल रखने के लिए जानबूझकर बचता है।

मेरे HTML की इमेज PDF में क्यों नहीं दिखतीं?

बाहरी URL से लोड होने वाली इमेज ब्राउज़र CORS नीति के अधीन होती हैं। यदि image server permissive CORS headers नहीं भेजता, तो html2canvas पिक्सल डेटा नहीं पढ़ सकता और image slot खाली render होता है। HTML में सीधे एम्बेड की गई inline base64-encoded इमेज या उसी origin की इमेज इस प्रतिबंध के बिना काम करती हैं।

क्या मेरा पेस्ट किया HTML सर्वर को भेजा जाता है?

नहीं। HTML पूरे समय ब्राउज़र मेमोरी में रहता है। DOMPurify इसे client-side स्वच्छ करता है, html2canvas इसे client-side रेंडर करता है, और jsPDF PDF को client-side एन्कोड करता है। ब्राउज़र टैब को कुछ नहीं छोड़ता।

DOMPurify sanitisation क्या हटाती है?

DOMPurify script tags, onclick और onload जैसे event handler attributes, javascript: URLs, और अन्य construct हटाती है जो code चला सकते हैं। यह structural और styling markup संरक्षित रखती है, इसलिए rendered आउटपुट एक जैसा दिखता है लेकिन document context में डालना सुरक्षित है।

क्या मैं HTML पेस्ट करने के बजाय पूरे वेब पेज के URL को बदल सकता हूं?

नहीं। टूल उस HTML markup के साथ काम करता है जो आप सीधे पेस्ट करते हैं। URL लोड करने के लिए पेज लाना होगा, जो अधिकांश साइटों के लिए CORS प्रतिबंधों में पड़ता है और एक network request शामिल होगा जो ऑपरेशन को लोकल प्रोसेसिंग मॉडल से बाहर ले जाता है।

इस टूल को दिखाने वाली गाइड और लेख

ब्राउज़र का PDF टूलकिट: साफ़ करें, लेआउट करें और संरचना दें