मुफ़्त HTML से PDF कनवर्टर

पूर्ण कस्टमाइज़ेशन के साथ HTML कोड को PDF में कनवर्ट करें। लोगो जोड़ें, अपने दस्तावेज़ों को स्टाइल करें और पेशेवर PDF उत्पन्न करें, सब आपके ब्राउज़र में।

पूर्वावलोकन यहाँ दिखाई देगा…

PDF विकल्प

HTML → PDF रूपांतरण के बारे में

PDF की शुरुआत 1991 में Adobe में John Warnock के «Camelot» परियोजना के रूप में हुई, एक आंतरिक प्रस्ताव जिसका उद्देश्य था एक «सामान्य फ़ाइल फ़ॉर्मेट बनाना जो किसी भी एप्लिकेशन से दस्तावेज़ कैप्चर कर सके, इन दस्तावेज़ों के इलेक्ट्रॉनिक संस्करण कहीं भी भेज सके, और किसी भी मशीन पर देखें और प्रिंट कर सके।» Warnock Adobe के सह-संस्थापक और (Charles Geschke के साथ) PostScript के आविष्कारक थे; Camelot का लक्ष्य था PostScript की प्रिंट-निष्ठा गारंटियों को लेकर उन्हें स्क्रीन पर भी काम में लाना। Acrobat 1.0 और PDF 1.0 जून 1993 में लॉन्च हुए, पहले व्यावसायिक Acrobat reader की क़ीमत 50 $ थी। PDF पंद्रह वर्षों तक एक Adobe-नियंत्रित प्रोप्रायटरी फ़ॉर्मेट रहा; Adobe ने 2008 में spec ISO को सौंपी और यह ISO 32000-1:2008 (PDF 1.7 एक खुले मानक के रूप में प्रकाशित) बना; प्रमुख PDF 2.0 (ISO 32000-2) 2017 में आया और संशोधन 2020 तक जारी रहे। Adobe ने अप्रैल 2023 में अपने शेष पेटेंट अधिकारों का त्याग किया, जिससे PDF दुनिया भर में पूरी तरह से पेटेंट-मुक्त हो गया। PDF अब सार्वभौमिक portable दस्तावेज़ फ़ॉर्मेट है, हर ऑपरेटिंग सिस्टम इसे देशी रूप से पढ़ता है, हर प्रिंटर इसे समझता है, हर क़ानूनी प्रणाली इसे स्वीकार करती है। पूरी इमारत PostScript-शैली के स्थिर-स्थिति लेआउट पर टिकी है: PDF पृष्ठ पर प्रत्येक तत्व की एक पूर्ण (x, y) स्थिति है, पृष्ठ निर्देशांक प्रणाली की आधाररेखा से संरेखित, टेक्स्ट फ़ॉन्ट + ग्लिफ़ संदर्भों के रूप में और ग्राफ़िक्स पथ कमांड के रूप में एनकोडेड।

HTML और PDF के बीच मूलभूत बेमेल वही है जो HTML-से-PDF रूपांतरण को इससे कठिन बनाता है जितना दिखता है। HTML reflow-आधारित है, सामग्री viewport के अनुसार ढलती है, आकार बदलने पर अनुच्छेद फिर से लपेटते हैं, उपयोगकर्ता के zoom करने पर लेआउट बदलता है। PDF स्थिर-लेआउट है, प्रत्येक तत्व पूर्ण रूप से स्थित है, पृष्ठ सीमाएँ स्पष्ट हैं, कभी reflow नहीं होता। एक से दूसरे में परिवर्तित करना कठिन निर्णयों की एक श्रृंखला को मजबूर करता है: लंबे पृष्ठों को कैसे विभाजित करें, परिणामी PDF में एम्बेडेड फ़ॉन्ट कहाँ रहते हैं, vector ग्राफ़िक्स कैसे संरक्षित होते हैं, क्या लिंक क्लिक करने योग्य रहते हैं। इनमें से अधिकांश के लिए कोई वस्तुनिष्ठ रूप से सही उत्तर नहीं है, सही व्यवहार उपयोग मामले पर निर्भर करता है।

दो JavaScript दृष्टिकोण: raster बनाम vector

ब्राउज़र-आधारित HTML-से-PDF रूपांतरण की दो वास्तुकलाएँ हैं। html2pdf.js (Erik Koopmans, इस उपकरण द्वारा उपयोग) दो अंतर्निहित पुस्तकालयों को लपेटता है, html2canvas (जो DOM से लेआउट पढ़कर और इसे फिर से बनाकर एक HTML तत्व को canvas छवि पर रेंडर करता है) और jsPDF (जो primitives से PDF बनाता है)। पाइपलाइन: HTML → canvas छवि → PDF में छवि एम्बेड करें। परिणाम पिक्सेल-सटीक है, जो आप पूर्वावलोकन में देखते हैं वही PDF में मिलता है, पर केवल raster: PDF में टेक्स्ट एक छवि है, चयन योग्य टेक्स्ट नहीं। आप PDF के अंदर शब्द खोज नहीं सकते, इससे कॉपी-पेस्ट नहीं कर सकते, स्क्रीन रीडर इसे नहीं पढ़ सकते। रिपोर्ट, प्रमाणपत्र, चालान और एक बार के दस्तावेज़ों के लिए यह स्वीकार्य है; जिन दस्तावेज़ों में टेक्स्ट खोजने योग्य या सुलभ होना चाहिए, उनके लिए यह एक महत्वपूर्ण सीमा है। वैकल्पिक वास्तुकला jsPDF का सीधे टेक्स्ट-रेंडरिंग primitives (doc.text(), doc.line(), doc.image()) के साथ उपयोग करती है, चयन योग्य टेक्स्ट और vector ग्राफ़िक्स के साथ PDF को शून्य से बनाते हुए। इसके लिए आपको हर HTML तत्व के लिए converter कोड लिखना होगा जिसे आप समर्थन देना चाहते हैं, पर यह एक «असली» PDF पैदा करता है जो खोजने योग्य और सुलभ है। ट्रेड-ऑफ़: html2pdf.js कोड की एक पंक्ति है; jsPDF-direct दृष्टिकोण एक काफ़ी बड़ा इंजीनियरिंग प्रोजेक्ट है। यह उपकरण उपयोग में आसानी (html2pdf.js) को टेक्स्ट चयन योग्यता पर वरीयता देता है, यह निर्णय लेते समय कि क्या आउटपुट आपकी ज़रूरतें पूरी करता है, ट्रेड-ऑफ़ के प्रति सजग रहें।

सर्वर-साइड विकल्प, जब ब्राउज़र-साइड पर्याप्त नहीं

wkhtmltopdf लंबे समय से चला आ रहा open-source HTML-से-PDF कमांड-लाइन उपकरण था, एक WebKit-आधारित renderer जो सर्वर पर HTML को PDF में बदलता था। अनगिनत CI पाइपलाइनों, उद्यम अनुप्रयोगों और PDF जनरेशन सेवाओं में उपयोग। wkhtmltopdf परियोजना 2023 में आर्काइव की गई (GitHub रिपॉज़िटरी अब केवल-पढ़ने योग्य है); नए अनुप्रयोगों के लिए यह अनुशंसा नहीं होनी चाहिए, हालाँकि इसके साथ अरबों मौजूदा PDFs उत्पन्न हुए। Puppeteer (Google, 2017 से headless Chrome) सर्वर-साइड HTML-से-PDF के लिए आधुनिक उद्योग मानक है। Puppeteer का page.pdf() Chromium की पूरी PDF जनरेशन पाइपलाइन का उपयोग करता है, चयन योग्य टेक्स्ट, एम्बेडेड फ़ॉन्ट, vector ग्राफ़िक्स, hyperlinks सभी सही काम करते हैं क्योंकि Chromium के पास असली PDF backend है। Playwright (Microsoft, 2020) क्रॉस-ब्राउज़र समतुल्य है (Chromium, Firefox, WebKit) समान PDF जनरेशन क्षमता के साथ। Prince (वाणिज्यिक, 495 $/सर्वर) उत्तम CSS Paged Media कार्यान्वयन है, multi-column लेआउट, चलते हेडर/फ़ुटर, नामित पन्ने, footnotes, OpenType सुविधाओं का समर्थन करता है। WeasyPrint (open source, Python) समान सुविधाओं के साथ क्रॉस-प्लेटफ़ॉर्म विकल्प है। Paged.js एक polyfill है जो CSS Paged Media सुविधाओं को ब्राउज़र-आधारित PDF जनरेशन में लाता है। ब्राउज़र का अंतर्निहित «PDF के रूप में सहेजें» (फ़ाइल → प्रिंट → PDF के रूप में सहेजें) सबसे सस्ता विकल्प है, यह मुफ़्त है, पहले से इंस्टॉल है, CSS Paged Media को उचित रूप से समर्थन देता है, और चयन योग्य-टेक्स्ट PDF आउटपुट उत्पन्न करता है। एक-बार के रूपांतरणों के लिए, तीसरे-पक्ष के उपकरण के बजाय यह अक्सर सही उत्तर होता है।

CSS Paged Media, असली CSS-से-प्रिंट कैसे काम करती है

W3C का CSS Paged Media Module paginated आउटपुट के लिए विशेष रूप से CSS सुविधाओं का एक सेट परिभाषित करता है: पृष्ठ आकार, मार्जिन और orientation को नियंत्रित करने के लिए @page नियम; पुस्तक के बाएँ और दाएँ पन्नों पर असममित मार्जिन के लिए @page :left / @page :right; पहले पृष्ठ के विशेष प्रबंधन के लिए @page :first; चलते हेडर और फ़ुटर के लिए margin boxes (@top-center, @bottom-right, आदि); पन्नों को कहाँ तोड़ें (आधुनिक syntax break-before: page / break-after: page / break-inside: avoid के साथ) नियंत्रित करने के लिए page-break-before / page-break-after / page-break-inside; अनुच्छेद विराम नियंत्रण के लिए orphans और widows। ब्राउज़र अपनी प्रिंट पाइपलाइन में CSS Paged Media के विभिन्न उप-समूह लागू करते हैं। Prince और WeasyPrint पूर्ण spec लागू करते हैं; Chrome का page.pdf() अधिकांश को कवर करता है; html2pdf.js (यह उपकरण) बुनियादी page-break-* नियमों का समर्थन करता है पर अधिक विस्तृत margin-box और नामित-पृष्ठ सुविधाओं को छोड़ता है। पुस्तक-गुणवत्ता लेआउट (शीर्षक पन्ने, अध्याय प्रारंभ, चलते हेडर, footnotes) की आवश्यकता वाले दस्तावेज़ों के लिए, Prince या WeasyPrint का उपयोग करें; विशिष्ट «इस रिपोर्ट को PDF के रूप में सहेजें» मामले के लिए, html2pdf.js पर्याप्त है।

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

ईमानदार दायरा: यह उपकरण क्या करता है और क्या नहीं

यह उपकरण आपके ब्राउज़र में HTML रेंडर करने और PDF डाउनलोड उत्पन्न करने के लिए html2pdf.js v0.10.1 (html2canvas + jsPDF के साथ बंडल किया गया build) का उपयोग करता है। परिणामी PDF पूर्वावलोकन के लिए पिक्सेल-सटीक है, जो आप देखते हैं वही मिलता है, पर टेक्स्ट एक raster छवि के रूप में रेंडर होता है, चयन योग्य टेक्स्ट नहीं। यह A4, Letter, A3 और A5 पृष्ठ आकार, portrait और landscape orientations, विन्यास योग्य मार्जिन, कस्टम फ़ाइलनाम, और पृष्ठ-विराम नियंत्रण के लिए बुनियादी CSS page-break-* नियमों का समर्थन करता है। यह उपकरण क्या नहीं करता, और कहाँ आपको विकल्प की ओर जाना चाहिए: PDF में चयन योग्य / खोजने योग्य टेक्स्ट (सर्वर-साइड Puppeteer, या ब्राउज़र «PDF के रूप में सहेजें» का उपयोग करें); पुस्तक-गुणवत्ता लेआउट चलते हेडर, फ़ुटर, नामित पन्ने, footnotes के साथ (सर्वर-साइड Prince या WeasyPrint का उपयोग करें); रेंडर किए गए HTML में JavaScript निष्पादन (converter HTML को html2canvas के माध्यम से चलाता है जो रेंडर की गई सामग्री के अंदर scripts निष्पादित नहीं करता); एनिमेटेड सामग्री (PDF स्थिर है); प्रिंट संदर्भों पर निर्भर media queries (रेंडरिंग screen संदर्भ में होती है)। रोज़मर्रा की «इस HTML से एक PDF बनाओ» ज़रूरतों के लिए, html2pdf.js काफ़ी अच्छा है; उत्पादन-ग्रेड पाइपलाइनों के लिए जिन्हें असली PDF टेक्स्ट और सुलभ आउटपुट चाहिए, सर्वर-साइड Puppeteer आधुनिक मानक है।

गोपनीयता: यहाँ केवल-ब्राउज़र क्यों मायने रखता है

PDF जनरेशन एक सामान्य cloud-SaaS व्यवसाय है, DocRaptor, PDFShift, PDFCrowd, API2PDF जैसी सेवाएँ उत्पन्न PDF के अनुसार शुल्क लेती हैं, आम तौर पर क्योंकि वे एक server farm पर headless Puppeteer चला रहे होते हैं और GPU-त्वरित रेंडरिंग की लागत वहन करते हैं। ट्रेड-ऑफ़ यह है कि आप उन सेवाओं को जो HTML सबमिट करते हैं उसे उनके बुनियादी ढाँचे पर संसाधित किया जाता है: चालानों में ग्राहक जानकारी होती है, रिपोर्टों में व्यापार डेटा होता है, प्रमाणपत्रों में व्यक्तिगत नाम होते हैं, रिज़्यूमे में सब कुछ होता है। आप जो भी उत्पन्न करते हैं, तीसरे पक्ष की सेवा देखती है। यह उपकरण html2pdf.js के माध्यम से पूरी तरह आपके ब्राउज़र में चलता है, Generate क्लिक करते समय DevTools के Network टैब में सत्यापित करें (एकमात्र आउटबाउंड अनुरोध CDN से html2pdf.js लाइब्रेरी प्राप्त करना है; एक बार लोड हो जाने के बाद, कोई और अनुरोध नहीं)। लाइब्रेरी लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) करें और converter अभी भी काम करता है। ग्राहक नाम, वित्तीय डेटा, आंतरिक टेम्पलेट या किसी भी सामग्री वाले HTML के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं देखना चाहते।

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

कौन सी HTML/CSS सुविधाएँ समर्थित हैं?

html2pdf मानक HTML और CSS का समर्थन करता है, जिसमें लेआउट, फ़ॉन्ट, रंग, छवियाँ और टेबल शामिल हैं। उन्नत सुविधाएँ सीमित हो सकती हैं।

अपने HTML में छवियाँ कैसे शामिल करूँ?

छवियों के लिए डेटा URI का उपयोग करें या सुनिश्चित करें कि बाहरी छवि URL सुलभ और CORS-संगत हैं।

PDF में टेक्स्ट चयन योग्य क्यों नहीं है?

क्योंकि html2pdf.js पहले HTML को एक canvas छवि पर रेंडर करता है, फिर छवि को PDF में एम्बेड करता है। PDF का «टेक्स्ट» वास्तव में टेक्स्ट की एक raster छवि है, असली टेक्स्ट ग्लिफ़ नहीं। यह दृश्य निष्ठा के लिए ट्रेड-ऑफ़ है: PDF बिल्कुल ब्राउज़र पूर्वावलोकन की तरह दिखता है, पर आप इस पर खोज नहीं सकते, कॉपी नहीं कर सकते, या स्क्रीन रीडर का उपयोग नहीं कर सकते। असली चयन योग्य PDF टेक्स्ट के लिए, विकल्प हैं: ब्राउज़र का अंतर्निहित «PDF के रूप में सहेजें» उपयोग करें (फ़ाइल → प्रिंट → PDF के रूप में सहेजें, चयन योग्य टेक्स्ट उत्पन्न करता है और मुफ़्त है); Puppeteer के page.pdf() जैसा सर्वर-साइड उपकरण उपयोग करें जिसके पास Chromium की पूरी PDF जनरेशन पाइपलाइन है; या JavaScript लिखें जो jsPDF के doc.text() primitives को सीधे कॉल करे (काफ़ी अधिक काम)।

मेरा पूर्वावलोकन PDF से अलग क्यों है?

पूर्वावलोकन ब्राउज़र में आपके HTML की रेंडरिंग दिखाता है। कुछ CSS सुविधाएँ PDF में अलग प्रदर्शित होती हैं। PDF में लेआउट का परीक्षण करें।

क्या मैं अपने HTML में पेज ब्रेक जोड़ सकता हूँ?

हाँ, CSS पेज ब्रेक का उपयोग करें: किसी भी तत्व में page-break-before: always; या page-break-after: always; जोड़ें।

क्या मेरा HTML एक सर्वर पर अपलोड किया जाता है?

नहीं। आप जो HTML चिपकाते हैं और उत्पन्न PDF दोनों आपके ब्राउज़र में रहते हैं। एकमात्र नेटवर्क अनुरोध स्वयं html2pdf.js लाइब्रेरी के लिए है जो पृष्ठ-लोड समय पर एक सार्वजनिक CDN से लोड होती है; एक बार लोड हो जाने के बाद, कोई और आउटबाउंड अनुरोध नहीं। Generate क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लाइब्रेरी लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) करें और converter अभी भी काम करता है। ग्राहक डेटा, वित्तीय विवरण, आंतरिक व्यापार टेम्पलेट, या किसी भी सामग्री वाले HTML के लिए सुरक्षित जिसे आप किसी तीसरे-पक्ष PDF सेवा को देखना नहीं चाहते।

संबंधित टूल

PDF को इमेज में बदलें Markdown से HTML कन्वर्टर HTML मिनिफायर