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

व्यावसायिक सेटिंग्स में पीडीएफ का बड़े पैमाने पर उपयोग किया जाता है, जिससे उनकी सुरक्षा कई वर्कफ़्लो का एक महत्वपूर्ण पहलू बन जाती है। एक वेब एप्लिकेशन विकसित करते समय जिसमें पीडीएफ खोलना शामिल है, यह संभावना है कि आपको पासवर्ड-सुरक्षित दस्तावेज़ मिलेंगे। हालाँकि, इस कार्यक्षमता को शुरू से लागू करने में समय लग सकता है और महत्वपूर्ण रखरखाव लागत लग सकती है, जो आपकी टीम के वर्तमान रोडमैप के साथ संरेखित नहीं हो सकती है।

फ़ॉक्सिट के साथ जावास्क्रिप्ट पीडीएफ लाइब्रेरी ब्राउज़र-आधारित एप्लिकेशन में पीडीएफ प्रस्तुत करना एक सहज कार्य बन जाता है। इस चरण-दर-चरण ट्यूटोरियल में, आप सीखेंगे कि एक नोड एप्लिकेशन को कैसे कॉन्फ़िगर किया जाए जो वेब के लिए फॉक्सिट पीडीएफ एसडीके की शक्ति का उपयोग करता है। यह एकीकरण आपको पासवर्ड-संरक्षित पीडीएफ को सीधे ब्राउज़र में आसानी से खोलने की अनुमति देता है, जिससे अधिकृत उपयोगकर्ताओं को दस्तावेज़ों का पूर्वावलोकन करने की क्षमता मिलती है। उन लोगों के लिए जो ट्यूटोरियल को छोड़कर एप्लिकेशन के पूर्ण कार्यात्मक संस्करण तक पहुंचना पसंद करते हैं, आप इसे आसानी से पा सकते हैं GitHub पर उपलब्ध है .

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

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

इस एप्लिकेशन को विकसित करने के लिए, आप इसका उपयोग करेंगे अभिव्यक्त करना बैकएंड विकास के लिए वेब फ्रेमवर्क, शुद्ध सीएसएस स्टाइलिंग उद्देश्यों के लिए, और फॉक्सिट का पीडीएफ एसडीके पीडीएफ कार्यक्षमता को एकीकृत करने के लिए।

आवश्यक शर्तें

• नोडजेएस संस्करण 8+ और NPM संस्करण 5+
• वेब के लिए फॉक्सिट पीडीएफ एसडीके ( निःशुल्क परीक्षण डाउनलोड यहां उपलब्ध है )
• आपकी फ़ॉक्सिट लाइसेंस कुंजी और क्रमांक

एक नया एक्सप्रेस ऐप बनाना

एक्सप्रेस जनरेटर एक नया एप्लिकेशन सेट करना आसान बनाता है। बस अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

 npx express-generator --git --view=hbs

यह कमांड .gitignore फ़ाइल और हैंडलबार टेम्पलेट फ़ाइलों के साथ एक नया एप्लिकेशन बनाएगा।

Dotenv npm पैकेज जोड़ें (अपनी फॉक्सिट लाइसेंस कुंजी और सीरियल नंबर तक पहुंचने के लिए उपयोग करें) और एक्सप्रेस निर्भरता स्थापित करें:

 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 फ़ाइल खोलें और इसे निम्नलिखित से बदलें:

 <!DOCTYPE html> <html lang="en"> <head> <title>Foxit PDF Previewer</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="container"> {{{body}}} </div> </body> </html>

यह PureCSS स्टाइलिंग लाइब्रेरी को लोड करेगा, लेकिन आप किसी अन्य फ्रंट एंड स्टाइलिंग फ्रेमवर्क का उपयोग कर सकते हैं जिससे आप परिचित हैं।

views/index.hbs फ़ाइल खोलें और इसे नीचे दिए गए से बदलें:

 <h1>PDF Previewer</h1> <p>Use the form below to preview any password-protected PDF file in this web application.</p> <!-- PDF Upload form --> <form class="pure-form"> <fieldset>   <input type="password" id="password" placeholder="Enter PDF Password" />   <input class="original-pdf-upload-button" type="file" name="file" id="file" accept=".pdf,.fdf,.xfdf" multiple="multiple" />   <label class="pure-button new-pdf-upload-button" for="file">Select a PDF file</label> </fieldset> </form> <!-- PDF Display Div --> <div id="pdf-viewer"></div> <!-- Foxit and custom JavaScript --> <script src="/lib/PDFViewCtrl.full.js"></script> <script> 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 = ''; }; </script>

यह फ़ाइल तीन उद्देश्यों को पूरा करती है. सबसे पहले, इसमें पासवर्ड फ़ील्ड के साथ एक पीडीएफ अपलोड फॉर्म शामिल है। फ़ाइल अपलोड इनपुट तत्व में एक <label> है, यह एक अच्छे स्टाइल वाले अपलोड बटन के रूप में कार्य करता है। इसके बाद, <div id=”pdf-viewer”> टैग फॉक्सिट पीडीएफ रीडर को लपेटता है जिसका उपयोग कस्टम जावास्क्रिप्ट में pdfViewer.init फ़ंक्शन में किया जाता है। इस फ़ाइल का अंतिम भाग फ़ॉक्सिट के PDFViewCtrl.PDFViewer वर्ग को लोड करता है और <script> टैग के अंदर कोड का उपयोग करके इसे आरंभ करता है।

एप्लिकेशन की कार्यक्षमता लगभग पूरी हो गई है, लेकिन परीक्षण करने से पहले, 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” नामक एक नया पैराग्राफ तत्व जोड़ें:

 <p id="wrong-password" class="error"><strong>Whoops!</strong> It looks like the password you entered was incorrect. Please enter a password and try uploading your file again. </p> ...

अंत में, आपको कुछ स्टाइल जोड़ने की आवश्यकता होगी ताकि त्रुटि संदेश केवल तभी दिखाया जाए जब catch विधि को कॉल किया जाए। अपनी public/stylesheets/style.css फ़ाइल में, नीचे जोड़ें:

 ... #wrong-password { display: none; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; }

यदि आप गलत पासवर्ड दर्ज करते हैं (या पासवर्ड फ़ील्ड को खाली छोड़ देते हैं) और एक पासवर्ड-सुरक्षित पीडीएफ अपलोड किया गया है, तो आपको एक त्रुटि संदेश दिखाई देगा, जैसा कि आप नीचे देख सकते हैं:

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

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