ओपन सोर्स जावास्क्रिप्ट पीडीएफ व्यूअर लाइब्रेरी

PDFऑब्जेक्ट क्या है?

PDFObject एक मुफ़्त और ओपन सोर्स जावास्क्रिप्ट लाइब्रेरी है जिसे वेब पेजों में PDF दस्तावेज़ों को एम्बेड करने के लिए विकसित किया गया है। यह HTML एम्बेड एलिमेंट जेनरेट करके और फिर उसे HTML संरचना में एकीकृत करके काम करता है। एम्बेड एलिमेंट फिर PDF दस्तावेज़ को रेंडर करता है। PDFObject खुद एक रेंडरर नहीं है; बल्कि यह एम्बेड एलिमेंट बनाने और उसे HTML के भीतर रखने पर ध्यान केंद्रित करता है। यह PDF को पूरे आकार में या वेबपेज के निर्दिष्ट अनुभागों में प्रदर्शित करने के लिए एम्बेड एलिमेंट बना सकता है।

PDFObject की कुछ मुख्य विशेषताएं निम्नलिखित हैं:

• फॉलबैक मैकेनिज्म: PDFObject में एक फॉलबैक मैकेनिज्म होता है, इसलिए ऐसे मामलों में जहां ब्राउज़र PDF को एम्बेड करने का समर्थन नहीं करता है, PDFObject स्वचालित रूप से फॉलबैक लॉजिक को सक्रिय कर देता है, जिससे डेवलपर्स को आवश्यकतानुसार PDF के लिए लिंक या कोई अन्य वैकल्पिक लॉजिक प्रदान करने की अनुमति मिलती है।
• PDF.js एकीकरण: PDFObject PDF.js के साथ वैकल्पिक एकीकरण प्रदान करता है, जिससे डेवलपर्स ब्राउज़र के डिफ़ॉल्ट PDF व्यूअर की परवाह किए बिना PDF एम्बेड कर सकते हैं। यह सुविधा तब उपयोगी होती है जब ब्राउज़र HTML में PDF दस्तावेज़ एम्बेड करने का समर्थन नहीं करता है।
• PDF ओपन पैरामीटर: PDFObject Adobe के स्वामित्व वाले PDF ओपन पैरामीटर का समर्थन करता है, जिससे डेवलपर्स PDF डिस्प्ले के लिए पैरामीटर निर्दिष्ट कर सकते हैं। इसमें व्यू मोड और अन्य Adobe-विशिष्ट सेटिंग्स जैसे विकल्प शामिल हैं। ये सभी पैरामीटर यहाँ पाए जा सकते हैं।

गिटहब आँकड़े

नाम:
भाषा:
सितारे:
कांटे:
लाइसेंस:
रिपॉजिटरी को अंतिम बार अद्यतन किया गया था

PDFObject के साथ आरंभ करना

हम npm मॉड्यूल का उपयोग करके PDFObject लाइब्रेरी डाउनलोड कर सकते हैं:

npm i pdfobject

ब्राउज़र समर्थन सत्यापन के साथ HTML में PDF एम्बेड करें

हम PDFObject लाइब्रेरी का उपयोग करके HTML में PDF दस्तावेज़ एम्बेड कर सकते हैं। शुरू में हम जाँच करेंगे कि ब्राउज़र PDFObject लाइब्रेरी की supportsPDFs विधि का उपयोग करके HTML में PDF दस्तावेज़ एम्बेड करने का समर्थन करता है या नहीं। यदि यह सही रिटर्न देता है, जो दर्शाता है कि यह HTML में PDF एम्बेड करने का समर्थन करता है, तो हम embed("document_name.pdf","#elementid") विधि का उपयोग करके HTML में PDF एम्बेड करेंगे। यह फ़ंक्शन HTML में एक विशिष्ट तत्व में PDF एम्बेड करेगा। पूर्ण-आकार के PDF एम्बेड के लिए हम किसी भी तत्व आईडी का उल्लेख नहीं करेंगे और विधि को embed("document_name.pdf") के रूप में कॉल करेंगे। हालाँकि, यदि यह गलत रिटर्न देता है, जो दर्शाता है कि यह HTML में PDF एम्बेड करने का समर्थन नहीं करता है, तो हम आवश्यकतानुसार अन्य वैकल्पिक तर्क पर जाएँगे। विवरण के लिए नीचे दिए गए कोड स्निपेट को देखें:

उत्पादन

निम्नलिखित आउटपुट HTML में एम्बेडेड PDF दस्तावेज़ प्रदर्शित करता है:

फ़ॉलबैक तंत्र बनाएँ

हम PDFObject का उपयोग करके किसी वेबपेज में PDF एम्बेड करते समय फ़ॉलबैक मैकेनिज़्म स्थापित कर सकते हैं जो तब सक्रिय होता है जब ब्राउज़र HTML में PDF एम्बेड करने का समर्थन नहीं करता है। PDFObject fallbackLink नामक पैरामीटर का उपयोग करता है जिसमें embed फ़ंक्शन को कॉल करते समय एक वैकल्पिक तर्क होता है। इसलिए, यदि कोई ब्राउज़र PDF एम्बेड करने का समर्थन नहीं करता है, तो fallbackLink में मौजूद कोड निर्दिष्ट div तत्व में निष्पादित होता है। विवरण के लिए नीचे दिए गए कोड स्निपेट को देखें:

उत्पादन

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

एडोब के पीडीएफ ओपन पैरामीटर्स के साथ पीडीएफ एम्बेड करें

हम PDFObject लाइब्रेरी का उपयोग करके कुछ ओपनिंग पैरामीटर के साथ PDF को एम्बेड कर सकते हैं। हम HTML में ओपनिंग पैरामीटर के साथ PDF दस्तावेज़ को एम्बेड करने के लिए PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: {parameters }}) विधि का उपयोग करेंगे। इन PDF ओपन पैरामीटर में PDF को खोलना और किसी विशिष्ट पृष्ठ संख्या पर स्क्रॉल करना जैसी सुविधाएँ शामिल हैं। विवरण के लिए नीचे दिए गए कोड स्निपेट को देखें:

उत्पादन

निम्न स्क्रीनशॉट में HTML में एम्बेड किया गया PDF दस्तावेज़ दिखाया गया है, जिसमें अतिरिक्त पैरामीटर हैं, जो एम्बेड तत्व को रेंडर करने के बाद पृष्ठ संख्या 3 पर स्क्रॉल करते हैं:

PDF.js को एकीकृत करके PDF एम्बेड करें

जैसा कि हम जानते हैं कि PDFObject HTML में PDF को एम्बेड करने के लिए ब्राउज़र के समर्थन पर निर्भर करता है, लेकिन यदि ब्राउज़र इसका समर्थन नहीं करता है तो यह PDF को रेंडर करने के लिए एक वैकल्पिक विधि प्रदान करता है। वैकल्पिक विधि PDFObject के साथ PDF.js को एकीकृत करना है। ऐसा करने के लिए, हमें अपने सर्वर पर PDF.js सेट करना होगा और फिर हम ForcePDFJS: true और PDFJS_URL: path/to/viewer.html/in/pdf.js पैरामीटर को embed फ़ंक्शन में पास करेंगे।

नोट: नीचे दिए गए उदाहरण कोड स्निपेट में, हमने PDF.js लाइब्रेरी युक्त एक सर्वर बनाया और आरंभ किया है, इसलिए http://localhost:8888 PDF.js लाइब्रेरी की ओर इंगित करता है।

उत्पादन

निम्न स्क्रीनशॉट PDFObject को PDF.js के साथ एकीकृत करके प्रस्तुत PDF दस्तावेज़ दिखाता है:

निष्कर्ष

निष्कर्ष में, PDFObject HTML में PDF दस्तावेज़ों को एम्बेड करने के लिए उपयोग में आसान जावास्क्रिप्ट लाइब्रेरी है। हालांकि यह रेंडरर के रूप में काम नहीं करता है और एम्बेड तत्वों के लिए ब्राउज़र के समर्थन पर निर्भर करता है जो एम्बेड तत्व का समर्थन नहीं करने वाले ब्राउज़र में टूटे हुए UI जैसी समस्याओं का कारण बन सकता है, लेकिन लाइब्रेरी में एम्बेड तत्व और फ़ॉलबैक तंत्र के लिए इसके समर्थन पहचान के माध्यम से ऐसी समस्याओं को हल करने की सुविधाएँ हैं। हम PDF.js को PDFObject के साथ एकीकृत करके उन ब्राउज़र में भी PDF रेंडर कर सकते हैं जो एम्बेड तत्वों का समर्थन नहीं करते हैं। अपनी सीमाओं के बावजूद, PDFObject वेब पेजों में PDF दस्तावेज़ों को एम्बेड और रेंडर करने के लिए एक मूल्यवान उपकरण के रूप में सामने आता है।

इसी तरह के उत्पादों