वेब एप्लिकेशन में पासवर्ड संरक्षित पीडीएफ प्रदर्शित करने के लिए एक गाइड

व्यावसायिक सेटिंग्स में पीडीएफ का बड़े पैमाने पर उपयोग किया जाता है, जिससे उनकी सुरक्षा कई वर्कफ़्लो का एक महत्वपूर्ण पहलू बन जाती है। एक वेब एप्लिकेशन विकसित करते समय जिसमें पीडीएफ खोलना शामिल है, यह संभावना है कि आपको पासवर्ड-सुरक्षित दस्तावेज़ मिलेंगे। हालाँकि, इस कार्यक्षमता को शुरू से लागू करने में समय लग सकता है और महत्वपूर्ण रखरखाव लागत लग सकती है, जो आपकी टीम के वर्तमान रोडमैप के साथ संरेखित नहीं हो सकती है। फ़ॉक्सिट के साथ ब्राउज़र-आधारित एप्लिकेशन में पीडीएफ प्रस्तुत करना एक सहज कार्य बन जाता है। इस चरण-दर-चरण ट्यूटोरियल में, आप सीखेंगे कि एक नोड एप्लिकेशन को कैसे कॉन्फ़िगर किया जाए जो वेब के लिए फॉक्सिट पीडीएफ एसडीके की शक्ति का उपयोग करता है। यह एकीकरण आपको पासवर्ड-संरक्षित पीडीएफ को सीधे ब्राउज़र में आसानी से खोलने की अनुमति देता है, जिससे अधिकृत उपयोगकर्ताओं को दस्तावेज़ों का पूर्वावलोकन करने की क्षमता मिलती है। उन लोगों के लिए जो ट्यूटोरियल को छोड़कर एप्लिकेशन के पूर्ण कार्यात्मक संस्करण तक पहुंचना पसंद करते हैं, आप इसे आसानी से पा सकते हैं . जावास्क्रिप्ट पीडीएफ लाइब्रेरी GitHub पर उपलब्ध है पासवर्ड संरक्षित पीडीएफ प्रदर्शित करने के लिए एक वेब एप्लिकेशन का निर्माण HTML सुविधाजनक अंतर्निहित फ़ाइल अपलोड सुविधाएँ प्रदान करता है जो उपयोगकर्ताओं को ब्राउज़र के भीतर अपनी स्थानीय मशीनों से फ़ाइलों के साथ इंटरैक्ट करने में सक्षम बनाता है। हालाँकि, जावास्क्रिप्ट का उपयोग करके पीडीएफ प्रदर्शित करना थोड़ा अधिक जटिल हो सकता है, खासकर पासवर्ड सुरक्षा से निपटते समय। इस व्यापक ट्यूटोरियल में, आप एक वेब एप्लिकेशन का निर्माण करेंगे जिसमें एक पीडीएफ अपलोड फॉर्म और एक वैकल्पिक पासवर्ड फ़ील्ड शामिल होगा। जब एक पासवर्ड-सुरक्षित पीडीएफ अपलोड किया जाता है, और सही पासवर्ड दर्ज किया जाता है, तो उपयोगकर्ता फ़ाइल का पूर्वावलोकन सहजता से कर पाएंगे। दूसरी ओर, यदि गलत पासवर्ड प्रदान किया गया है, तो एक त्रुटि संदेश प्रदर्शित होगा, जो उपयोगकर्ताओं को पुनः प्रयास करने के लिए प्रेरित करेगा। इस एप्लिकेशन को विकसित करने के लिए, आप इसका उपयोग करेंगे बैकएंड विकास के लिए वेब फ्रेमवर्क, स्टाइलिंग उद्देश्यों के लिए, और पीडीएफ कार्यक्षमता को एकीकृत करने के लिए। अभिव्यक्त करना शुद्ध सीएसएस फॉक्सिट का पीडीएफ एसडीके आवश्यक शर्तें संस्करण 8+ और संस्करण 5+ नोडजेएस NPM वेब के लिए फॉक्सिट पीडीएफ एसडीके ( ) निःशुल्क परीक्षण डाउनलोड यहां उपलब्ध है आपकी फ़ॉक्सिट लाइसेंस कुंजी और क्रमांक एक नया एक्सप्रेस ऐप बनाना एक्सप्रेस जनरेटर एक नया एप्लिकेशन सेट करना आसान बनाता है। बस अपने टर्मिनल में निम्नलिखित कमांड चलाएँ: npx express-generator --git --view=hbs यह कमांड फ़ाइल और टेम्पलेट फ़ाइलों के साथ एक नया एप्लिकेशन बनाएगा। .gitignore हैंडलबार npm पैकेज जोड़ें (अपनी फॉक्सिट लाइसेंस कुंजी और सीरियल नंबर तक पहुंचने के लिए उपयोग करें) और एक्सप्रेस निर्भरता स्थापित करें: Dotenv npm i dotenv && npm i वेब के लिए फॉक्सिट पीडीएफ एसडीके डाउनलोड करने के बाद, आपको फ़ाइल में अपनी लाइसेंस कुंजी और सीरियल नंबर मिलेगा। इसके बाद, अपने वेब एप्लिकेशन की रूट डायरेक्टरी में नामक एक नई फ़ाइल बनाएं और दो मान जोड़ें: examples/license-key.js .env LICENSE_SN="" LICENSE_KEY="" फॉक्सिट लाइब्रेरी को अपने वेब एप्लिकेशन में कॉपी करें ताकि आप इसे फ्रंट एंड से एक्सेस कर सकें। इसके बाद, आपके द्वारा डाउनलोड की गई फॉक्सिट पीडीएफ एसडीके से निर्देशिका को कॉपी करें और इसे अपने वेब एप्लिकेशन की निर्देशिका में पेस्ट करें। अब फॉक्सिट जावास्क्रिप्ट पीडीएफ लाइब्रेरी आपके वेब एप्लिकेशन में उपलब्ध होगी। lib/ public/ अंत में, आप नहीं चाहते कि संवेदनशील जानकारी या मालिकाना पैकेज संस्करण नियंत्रण में समाप्त हो जाएं, इसलिए नीचे अपनी फ़ाइल में जोड़ें: .gitignore ... public/lib/ .env एक बार जब आपके वेब एप्लिकेशन में सभी आवश्यक निर्भरताएं स्थापित हो जाती हैं, तो आप फॉक्सिट का उपयोग करके पीडीएफ पूर्वावलोकन प्रदर्शित करने के लिए जिम्मेदार मार्ग बनाने के लिए आगे बढ़ सकते हैं। मार्ग की स्थापना एक्सप्रेस एप्लिकेशन के प्रत्येक पेज का एक रूट होता है, जिसमें वह पीडीएफ अपलोड पेज भी शामिल है जिसे आप इस डेमो में बनाएंगे। लाइसेंस कुंजी और क्रमांक को दृश्य में भेजने के लिए फ़ाइल को अपडेट करें: routes/index.js var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { licenseSN: process.env.LICENSE_SN, licenseKey: process.env.LICENSE_KEY, }); }); module.exports = router; आपको हार्ड-कोड क्रेडेंशियल्स की आवश्यकता के बिना, जिनके लिए कोड परिवर्तन की आवश्यकता होती है, सर्वर पर अपने क्रेडेंशियल्स को आसानी से अपडेट करने की अनुमति देता है। अपने एक्सप्रेस एप्लिकेशन में एक प्रमाणीकरण परत जोड़कर, आप फॉक्सिट क्रेडेंशियल्स तक पहुंच को नियंत्रित कर सकते हैं और अधिकृत उपयोगकर्ताओं के लिए दृश्यता को प्रतिबंधित कर सकते हैं। वेरिएबल उपलब्ध होने से पहले, आपको लाइब्रेरी को शामिल करना होगा जो आपकी फ़ाइल से वेरिएबल्स लोड करती है। खोलें और फ़ाइल के शीर्ष पर निम्नलिखित जोड़ें: process.env dotenv .env app.js require('dotenv').config(); ... आपका और सुरक्षित रूप से संग्रहीत किया जा रहा है और आवश्यकता पड़ने पर ही फ्रंट एंड तक भेजा जाता है। इसके बाद, आप वेब एप्लिकेशन के प्रदर्शन भाग को संबोधित करेंगे। LICENSE_SN LICENSE_KEY पीडीएफ अपलोड करना और प्रदर्शित करना फॉक्सिट का पीडीएफ एसडीके पासवर्ड की जांच करने और उपयोगकर्ता को पीडीएफ प्रदर्शित करने में शामिल अधिकांश काम को संभाल लेगा, लेकिन आपको फ़ाइल और पासवर्ड इनपुट दोनों के लिए उपयोगकर्ता इंटरफ़ेस को प्रशासित करने की आवश्यकता है। इससे पहले, आपको लेआउट को अद्यतन करने की आवश्यकता है ताकि इसमें आधार शैलियाँ शामिल हों और फिर आप 'व्यूपोर्ट' को स्केल कर सकें। इसके परिणामस्वरूप एक पीडीएफ पूर्वावलोकन आएगा जिसका आकार उपयोगकर्ता के डिस्प्ले के अनुसार सही होगा। फ़ाइल खोलें और इसे निम्नलिखित से बदलें: views/layout.hbs Foxit PDF Previewer {{{body}}} यह स्टाइलिंग लाइब्रेरी को लोड करेगा, लेकिन आप किसी अन्य फ्रंट एंड स्टाइलिंग फ्रेमवर्क का उपयोग कर सकते हैं जिससे आप परिचित हैं। PureCSS फ़ाइल खोलें और इसे नीचे दिए गए से बदलें: views/index.hbs PDF Previewer Use the form below to preview any password-protected PDF file in this web application.

Select a PDF file var PDFViewer = PDFViewCtrl.PDFViewer; var pdfViewer = new PDFViewer({ libPath: '/lib', jr: { licenseSN: "{{ licenseSN }}", licenseKey: "{{ licenseKey }}", }, }); pdfViewer.init('#pdf-viewer'); document.getElementById('file').onchange = function (e) { if (!this.value) { return; } var pdf,fdf; for (var i = e.target.files.length; i--;) { var file = e.target.files[i]; var filename = file.name; if (/\.pdf$/i.test(filename)) { pdf = file } else if (/\.(x)?fdf$/i.test(filename)) { fdf = file } } var options = {password: '', fdf: {file: fdf}}; if (document.getElementById('password').value) { options.password = document.getElementById('password').value; document.getElementById('password').value = ''; } pdfViewer.openPDFByFile(pdf, options); this.value = ''; }; यह फ़ाइल तीन उद्देश्यों को पूरा करती है. सबसे पहले, इसमें पासवर्ड फ़ील्ड के साथ एक पीडीएफ अपलोड फॉर्म शामिल है। फ़ाइल अपलोड इनपुट तत्व में एक है, यह एक अच्छे स्टाइल वाले अपलोड बटन के रूप में कार्य करता है। इसके बाद, टैग फॉक्सिट पीडीएफ रीडर को लपेटता है जिसका उपयोग कस्टम जावास्क्रिप्ट में फ़ंक्शन में किया जाता है। इस फ़ाइल का अंतिम भाग फ़ॉक्सिट के वर्ग को लोड करता है और टैग के अंदर कोड का उपयोग करके इसे आरंभ करता है। pdfViewer.init PDFViewCtrl.PDFViewer एप्लिकेशन की कार्यक्षमता लगभग पूरी हो गई है, लेकिन परीक्षण करने से पहले, फ़ाइल खोलें और इसे निम्नलिखित से बदलें: public/stylesheets/style.css body { background-color: #f7f7f7; color: #333333; } .container { background-color: #ffffff; margin: 0 auto; padding: 30px; } /* File upload button styling */ .original-pdf-upload-button { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .new-pdf-upload-button { top: -2px; position: relative; } आपको पीडीएफ अपलोड बटन को स्टाइल करने की अनुमति देता है ताकि यह अन्य प्योरसीएसएस बटन के साथ सुसंगत दिखे, और आपके एप्लिकेशन में थोड़ा सा पैडिंग भी जोड़ता है। अपने एप्लिकेशन का परीक्षण करने के लिए, पहले अपना कार्य सहेजें और फिर अपने टर्मिनल से करें। नोड एक सर्वर को चालू करेगा, और आपका वेब ऐप पर उपलब्ध होगा। npm start localhost:3000 उस परिदृश्य को संभालने के लिए जहां कोई उपयोगकर्ता पासवर्ड-सुरक्षित पीडीएफ फाइल अपलोड करते समय गलत पासवर्ड दर्ज करता है, आप एक त्रुटि संदेश प्रदर्शित करने के लिए मौजूदा कोड को बढ़ा सकते हैं और उपयोगकर्ता को फिर से प्रयास करने की अनुमति दे सकते हैं। यहां बताया गया है कि आप इस कार्यक्षमता को कैसे कार्यान्वित कर सकते हैं: त्रुटियों को संभालना फॉक्सिट की विधि एक लौटाती है, यदि आप जानना चाहते हैं कि यह कब हल होता है, तो या विधियों में कॉलबैक जोड़ें। pdfViewer.openPDFByFile वादा then catch अपनी फ़ाइल में, लाइन को नीचे दिए गए से बदलें: views/index.hbs pdfViewer.openPDFByFile… ... pdfViewer.openPDFByFile(pdf, options) .catch(error => { console.error(error); document.getElementById('wrong-password').style.display = 'block'; }); ... फ़ाइल के शीर्ष पर नामक एक नया पैराग्राफ तत्व जोड़ें: id=”wrong-password” Whoops! It looks like the password you entered was incorrect. Please enter a password and try uploading your file again.

... अंत में, आपको कुछ स्टाइल जोड़ने की आवश्यकता होगी ताकि त्रुटि संदेश केवल तभी दिखाया जाए जब विधि को कॉल किया जाए। अपनी फ़ाइल में, नीचे जोड़ें: catch public/stylesheets/style.css ... #wrong-password { display: none; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; } यदि आप गलत पासवर्ड दर्ज करते हैं (या पासवर्ड फ़ील्ड को खाली छोड़ देते हैं) और एक पासवर्ड-सुरक्षित पीडीएफ अपलोड किया गया है, तो आपको एक त्रुटि संदेश दिखाई देगा, जैसा कि आप नीचे देख सकते हैं: इस ट्यूटोरियल में, आपने सीखा कि एक सुरक्षित नोड वेब एप्लिकेशन कैसे बनाया जाए जो उपयोगकर्ताओं को अपने ब्राउज़र में पासवर्ड से सुरक्षित पीडीएफ का पूर्वावलोकन करने में सक्षम बनाता है। फॉक्सिट पीडीएफ एसडीके का लाभ उठाकर, आप विकास के समय और प्रयास को काफी कम कर सकते हैं। फॉक्सिट पीडीएफ एसडीके व्यापक पेशकश करता है और विभिन्न अनुप्रयोगों के निर्माण में आपकी सहायता के लिए उदाहरणों की एक विस्तृत श्रृंखला। प्रलेखन यह ध्यान देने योग्य है कि फॉक्सिट न केवल वेब अनुप्रयोगों के लिए बल्कि इसके लिए भी पीडीएफ एसडीके प्रदान करता है . इसका मतलब है कि आप विभिन्न वातावरणों में फॉक्सिट पीडीएफ एसडीके की शक्ति का उपयोग कर सकते हैं, जिससे आपके अनुप्रयोगों में सुसंगत और विश्वसनीय पीडीएफ प्रोसेसिंग क्षमताएं सुनिश्चित हो सकेंगी। अन्य प्लेटफ़ॉर्म जैसे मोबाइल और देशी ऐप्स भी प्रकाशित किया गया है. यहाँ