डेवलपर्स अक्सर PDF व्यूअर्स को कम आंकते हैं। यह एक साधारण 'फाइल-इन-ए-बॉक्स' समस्या जैसा लगता है। आप बाइट्स फेच करते हैं, किसी कंपोनेंट को URL की ओर पॉइंट करते हैं, और काम खत्म। Vue.js अधिकांश UI कार्यों को बहुत सरल बना देता है, फिर भी प्रोडक्शन-रेडी PDF व्यूअर उन फीचर्स में से एक है जो चुपचाप पूरे स्प्रिंट्स को खा जाते हैं। मैंने दो हफ्तों में चार अलग-अलग तरीकों से एक ही व्यूअर बनाया। हर कोशिश ने एक ही बात साबित की: सोमवार को आपके द्वारा चुनी गई लाइब्रेरी यह तय करती है कि दो महीने बाद आप किन बग्स को डीबग कर रहे होंगे।
पुराने ट्यूटोरियल का जाल
अधिकांश गाइड अभी भी उन लाइब्रेरीज़ की सिफारिश करते हैं जिन्हें आखिरी बार तब अपडेट किया गया था जब Vue 2 डिफ़ॉल्ट था। एक डेवलपर README को सरसरी तौर पर देखता है, इंस्टॉल कमांड चलाता है, और मान लेता है कि कठिन काम पूरा हो गया है। वास्तव में, कठिन काम तो अभी शुरू ही हुआ है। आपको सर्च की ज़रूरत होगी। आपको ब्राउज़र टैब को क्रैश किए बिना 400 पन्नों के पॉलिसी डॉक्यूमेंट को संभालना होगा। मोबाइल पर कोई पूछेगा कि pinch-to-zoom काम क्यों नहीं कर रहा है। README शायद ही कभी आपको इनमें से किसी चीज़ के बारे में चेतावनी देता है क्योंकि डेमो केवल पांच पन्नों के एक अकादमिक पेपर का पहला पेज ही रेंडर करता है।
चार दृष्टिकोण
Vue के लिए कोई एक सबसे अच्छी PDF लाइब्रेरी नहीं है। केवल वही सबसे अच्छी है जो आपके यूज़र्स के वास्तविक कार्यों के लिए सही बैठती है।
PDF.js: DIY रास्ता
Mozilla का PDF.js लगभग हर वेब-आधारित व्यूअर के पीछे का इंजन है। इसे Vue 3 ऐप में डाल देने का मतलब कंपोनेंट इंस्टॉल करना नहीं है; इसका मतलब एक प्रोजेक्ट को अपनाना है। आप getDocument के साथ डॉक्यूमेंट फेच करते हैं, प्रत्येक पेज को <canvas> एलिमेंट पर रेंडर करते हैं, और उन कैनवस को अपने टेम्पलेट में जोड़ते हैं। पहले दिन, आप उत्पादक महसूस करते हैं। तीसरे दिन तक, आप Vite बंडलिंग और CORS हेडर के साथ तालमेल बिठाने के लिए वर्कर स्क्रिप्ट को कॉन्फ़िगर कर रहे होते हैं।
नेटीव ब्राउज़र स्क्रॉल दस पन्नों के लिए ठीक काम करता है। लेकिन हज़ार पन्नों पर यह अटक जाता है, इसलिए आप वर्चुअल स्क्रॉलिंग बनाते हैं। फिर आप देखते हैं कि टेक्स्ट को सिलेक्ट नहीं किया जा सकता, इसलिए आप प्रत्येक कैनवस के ऊपर पारदर्शी टेक्स्ट डिव्स (transparent text divs) ओवरले करते हैं। प्रिंटिंग धुंधली दिखती है, इसलिए आप DPI सेटिंग्स और मीडिया क्वेरीज़ के पीछे भागते हैं। मोबाइल pinch-to-zoom ब्राउज़र के नेटीव जेस्चर हैंडलिंग के साथ संघर्ष करता है। क्रॉस-डॉक्यूमेंट सर्च का मतलब है हर पेज से टेक्स्ट को एसिंक्रोनस तरीके से निकालना और इंडेक्स करना, और फिर एक ऐसा UI बनाना जो मेन थ्रेड को ब्लॉक किए बिना परिणामों को कतारबद्ध (queue) करे। Cursor जैसे AI कोडिंग असिस्टेंट के साथ बॉयलरप्लेट (boilerplate) जनरेट करने के बावजूद, आर्किटेक्चर की ज़िम्मेदारी आपकी ही होती है। कठिन हिस्से गायब नहीं होते; वे आपके कोडबेस में समा जाते हैं। यह रास्ता तभी समझ में आता है जब आपकी ज़रूरतें वास्तव में बहुत विशिष्ट हों, या जब आपके पास कई सप्ताह खाली हों और रेडीमेड व्यवहार से बचने का कोई ठोस कारण हो।
vue-pdf-embed: हल्का रास्ता
कभी-कभी आपको बस फाइल दिखानी होती है। vue-pdf-embed एक Vue 3 कंपोनेंट है जो सोर्स स्वीकार करता है और पेजों को वर्टिकल स्टैक में रेंडर करता है। इंस्टॉलेशन और इंटीग्रेशन में कुछ ही मिनट लगते हैं। जनरेट किए गए इनवॉइस या कंप्लायंस रिपोर्ट दिखाने वाले इंटरनल एडमिन पैनल के लिए, यह अक्सर पर्याप्त होता है। कंपोनेंट कैनवस रेंडरिंग को संभालता है, और आपके यूज़र्स स्क्रॉल कर सकते हैं।
इसका ट्रेड-ऑफ (trade-off) बाकी सब कुछ है। इसमें कोई टूलबार नहीं है, कोई डॉक्यूमेंट सर्च नहीं है, कोई थंबनेल साइडबार नहीं है, और स्क्रॉल कंटेनर को देखने के अलावा कोई पेज नेविगेशन नहीं है। जिस क्षण कोई स्टेकहोल्डर पूछता है, "क्या मैं इनवॉइस नंबर सर्च कर सकता हूँ?" आपका दो घंटे का इंटीग्रेशन एक कस्टम बिल्ड में बदल जाता है। इसे तब चुनें जब आपके PDF छोटे हों, आपके दर्शक इंटरनल हों, और इंटरैक्शन मॉडल पूरी तरह से केवल पढ़ने के लिए (read-only) स्क्रॉलिंग हो।
@tato30/vue-pdf: कंट्रोल वाला रास्ता
यह लाइब्रेरी एक मोनोलिथिक कंपोनेंट से बदलकर एक कंपोज़ेबल (composable) का रूप ले लेती है। यह usePDF को एक्सपोज़ करती है, जिसे आप अपने setup ब्लॉक के अंदर कॉल करते हैं। पूरे स्क्रॉल करने योग्य डॉक्यूमेंट को रेंडर करने के बजाय, आप रिएक्टिव refs के माध्यम से एक बार में एक पेज को मैनेज करते हैं। यह सुनने में अतिरिक्त काम लग सकता है, लेकिन जब इंटरफ़ेस में सटीकता की आवश्यकता होती है, तो यह बहुत मददगार होता है।
एक इंश्योरेंस क्लेम रिव्यू टूल की कल्पना करें जहाँ एडजस्टर्स एक डॉक्यूमेंट पेज को सत्यापित करते हैं, 'Next' पर क्लिक करते हैं, और सिस्टम प्रत्येक व्यूइंग इवेंट को लॉग करता है। यहाँ एक निरंतर स्क्रॉल करने वाला व्यूअर गलत उदाहरण होगा। आपको एक नियंत्रित पेजिनेटर (paginator) चाहिए, शायद पेज-लेवल कमेंटिंग या सीधे वर्तमान पेज इंडेक्स से जुड़े अप्रूवल बटन के साथ। क्योंकि usePDF आपको पेज काउंट और वर्तमान पेज को रिएक्टिव डेटा के रूप में देता है, इसे कस्टम नेविगेशन बार या प्रोग्रेस इंडिकेटर से जोड़ना स्वाभाविक लगता है। आप अभी भी कैनवस के चारों ओर क्रोम (chrome/UI elements) बनाते हैं, लेकिन आप लो-लेवल रेंडरिंग बॉयलरप्लेट से बच जाते हैं। यह उन ऐप्स के लिए उपयुक्त है जहाँ यूज़र्स पूरे दस्तावेज़ को स्कैन करने के बजाय एक-एक करके पेज देखते हैं।
Vue PDF Viewer: फुल-सर्विस रास्ता
एक ऐसा मोड़ आता है जहाँ व्यूअर फीचर्स को फिर से बनाना आपके वास्तविक उत्पाद से ध्यान भटकाने का कारण बन जाता है। Vue PDF Viewer एक कमर्शियल कंपोनेंट है जो फुल टूलबार, टेक्स्ट सर्च, एनोटेशन, मोबाइल रिस्पॉन्सिवनेस और वर्चुअल स्क्रॉलिंग के साथ आता है, जिसे पहले से ही विभिन्न कठिन परिस्थितियों (edge cases) में टेस्ट किया गया है। आपका काम अब आविष्कार करने के बजाय कॉन्फ़िगरेशन का हो जाता है। आप अपने डिज़ाइन सिस्टम से मेल खाने के लिए थीम को एडजस्ट करते हैं, अपनी ज़रूरत के फीचर्स को चालू/बंद करते हैं, और उस काम पर आगे बढ़ते हैं जो वास्तव में आपके ऐप को दूसरों से अलग बनाता है।
लाइसेंस की शुरुआती फीस वास्तविक है, लेकिन सर्च इंडेक्सिंग और एनोटेशन लेयर्स को फिर से बनाने में खर्च होने वाले इंजीनियरिंग के दो हफ्तों की लागत भी उतनी ही वास्तविक है। जब आप किसी वास्तविक डेडलाइन के तहत प्रोडक्शन ऐप लॉन्च कर रहे हों और आपके उपयोगकर्ता डेस्कटॉप PDF सॉफ्टवेयर के समान अनुभव की अपेक्षा करते हों, तब यह सही टूल है।
इंस्टॉलेशन की वास्तविक लागत क्या है
सबसे बड़ी गलती npm install कमांड को कुल कीमत मान लेना है। वास्तविक लागत वह है जो आप इंस्टॉलेशन पूरा होने के बाद बनाते हैं। एक लाइटवेट लाइब्रेरी पहले दिन सस्ती होती है लेकिन बीसवें दिन महंगी हो जाती है जब आपको एहसास होता है कि आपको सर्च बार की ज़रूरत है। DIY रास्ता पहले दिन मुफ्त होता है लेकिन साठवें दिन महंगा हो जाता है जब आप अभी भी मोबाइल टच टारगेट और प्रिंट स्टाइलशीट को ठीक कर रहे होते हैं। कमर्शियल रास्ता शुरुआत में पैसे लेता है, लेकिन यह आपके इंजीनियरिंग के कई हफ्तों का समय बचा सकता है जिसे आप अपने वास्तविक बिजनेस लॉजिक पर खर्च कर सकते हैं।
किसी लाइब्रेरी को सिर्फ इसलिए न चुनें क्योंकि उसका README छोटा और सरल है। अपने प्रोजेक्ट की आवश्यकताओं के आधार पर चुनाव करें। थंबनेल का साइडबार, टेक्स्ट सर्च और क्लाइंट-साइड एनोटेशन आपको एक फुल-सर्विस समाधान की ओर इशारा करते हैं। एक इंटरनल डैशबोर्ड के अंदर रसीद का त्वरित प्रीव्यू आपको लाइटवेट एम्बेड की ओर इशारा करता है।
मुख्य निष्कर्ष
किसी भी Vue PDF लाइब्रेरी को चुनने से पहले, यह स्पष्ट रूप से लिख लें कि आपके उपयोगकर्ताओं को वास्तव में क्या करने की आवश्यकता है। यदि उन्हें केवल छोटे दस्तावेज़ों को स्क्रॉल करने की आवश्यकता है, तो vue-pdf-embed आपके काम आ जाएगा। यदि वे एक नियंत्रित वर्कफ़्लो में पेजों पर आगे बढ़ते हैं, तो @tato30/vue-pdf का उपयोग करें। यदि वे किसी बिजनेस-क्रिटिकल ऐप के भीतर एनोटेट, सर्च और प्रिंट करते हैं, तो कमर्शियल व्यूअर खरीदें। और यदि आपकी आवश्यकताएं वास्तव में अद्वितीय हैं लेकिन आपकी समयसीमा लचीली है, तो कुछ हफ्ते निकालें और सीधे PDF.js पर निर्माण करें। एक PDF व्यूअर कभी भी केवल एक बॉक्स में रखी फाइल नहीं होता है। यह एक पूर्ण दस्तावेज़ इंटरफ़ेस है, और आपके द्वारा चुने गए बिल्डिंग ब्लॉक से यह तय होगा कि आप इस महीने शिप करेंगे या अगली तिमाही में।