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

पीडीएफऑब्जेक्ट क्या है?

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

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

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

गिटहब आँकड़े

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

पीडीएफऑब्जेक्ट के साथ शुरुआत करना

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

npm i pdfobject

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

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

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

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

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

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

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

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

निम्नलिखित स्क्रीनशॉट HTML में एम्बेडेड पीडीएफ दस्तावेज़ को अतिरिक्त पैरामीटर के साथ दिखाता है जो एम्बेड तत्व को रेंडर करने के बाद पेज नंबर 3 पर स्क्रॉल करता है:

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

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

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

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

निष्कर्ष

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

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