4,090 रीडिंग

वेब के लिए फॉक्सिट पीडीएफ एसडीके का उपयोग करके कस्टम फॉर्म फ़ील्ड बनाने के लिए एक गाइड

द्वारा Foxit Software8m2023/11/17

बहुत लंबा; पढ़ने के लिए

यह ट्यूटोरियल आपको सिखाएगा कि वेब के लिए फॉक्सिट पीडीएफ लाइब्रेरी का उपयोग करके अपने वेब ब्राउज़र पीडीएफ दस्तावेज़ों में कस्टम फॉर्म फ़ील्ड कैसे बनाएं।

featured image - वेब के लिए फॉक्सिट पीडीएफ एसडीके का उपयोग करके कस्टम फॉर्म फ़ील्ड बनाने के लिए एक गाइड

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

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

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

वेब के लिए फॉक्सिट पीडीएफ एसडीके क्या है?

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

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

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

वेब के लिए फ़ॉक्सिट पीडीएफ एसडीके लागू करना

वेब के लिए फॉक्सिट पीडीएफ एसडीके डाउनलोड करें । ज़िप फ़ाइल में एसडीके, दस्तावेज़ीकरण और उदाहरण शामिल होने चाहिए।

आप अनज़िप की गई निर्देशिका से HTTP सर्वर चलाकर इन उदाहरणों का पूर्वावलोकन कर सकते हैं।

 # NPX available with NPM v5.2 or newer npx http-server

प्रोजेक्ट सेटअप करें

यह ट्यूटोरियल फ्रंटएंड टूलिंग के लिए Vite का उपयोग करता है। यह ईएस मॉड्यूल (ईएसएम) पर आधारित है, तेज़ है, और एसडीके का उपयोग करने के लिए आपको जो कुछ भी चाहिए वह सब कुछ के साथ आता है। टेम्पलेट से एक नया प्रोजेक्ट बनाने और डेवलपमेंट सर्वर शुरू करने के लिए, सुनिश्चित करें कि आपके पास Node.js संस्करण 12.2.0 या नया है और निम्नलिखित कमांड चलाएँ:

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

SDK को बनाई गई निर्देशिका में ले जाएँ। इस ट्यूटोरियल के शेष भाग के लिए, SDK को मूल प्रोजेक्ट निर्देशिका के सापेक्ष ./FoxitPDFSDKForWeb पर उपलब्ध माना जाता है।

पीडीएफ लोड हो रहा है

प्रयोग शुरू करने के लिए आपको अपलोड किए गए दस्तावेज़ के साथ एक पीडीएफ व्यूअर की आवश्यकता होगी। पीडीएफ व्यूअर को आरंभ करने के लिए, पहले HTML संरचना बनाएं और एसडीके लोड करें।

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

इसके अतिरिक्त, style.css में, तत्वों को स्टाइल करने के लिए कुछ CSS जोड़ें:

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

Main.js के अंदर, pdfViewer का एक उदाहरण बनाने के लिए SDK का उपयोग करें:

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

आप LicenseSN और LicenseKey के लिए अपने मान ./FoxitPDFSDKForWeb/examples/license-key.js फ़ाइल के अंदर पा सकते हैं।

पीडीएफव्यूअर कंस्ट्रक्टर को एक कॉन्फ़िगरेशन ऑब्जेक्ट प्रदान करके बनाया गया है:

libPath: अनज़िप्ड SDK पैकेज के lib फ़ोल्डर का सापेक्ष पथ
जूनियर: जेआर इंजन के लिए कॉन्फ़िगरेशन विकल्प जिसमें सबसे महत्वपूर्ण, लाइसेंसिंग जानकारी शामिल है
Customs.ScrollWrap: एक कस्टम घटक जो पीडीएफ आकार और स्क्रॉलिंग को नियंत्रित करता है, जहां इसे सेट करने से दर्शक कंटेनर में समायोजित हो जाता है

पीडीएफव्यूअर बनने के बाद, आपको बस इसे इनिशियलाइज़ करना है और दस्तावेज़ को लोड करना है:

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

उपरोक्त स्निपेट पीडीएफ फाइल को ब्लॉब के रूप में लाता है और इसे openPDFByFile() विधि का उपयोग करके व्यूअर में खोलता है। उपयोग किया गया पीडीएफ दस्तावेज़ एसडीके के सम्मिलित दस्तावेज़ से एक डेमो गाइड है।

दाईं ओर का अतिरिक्त स्थान खींचने योग्य प्रपत्र फ़ील्ड के लिए एक मेनू के रूप में काम करेगा।

कस्टम फॉर्म फ़ील्ड बनाना

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

मेटाडेटा को परिभाषित करना

अनुमत फ़ील्ड, साथ ही अतिरिक्त सहायकों के लिए मेटाडेटा को परिभाषित करके प्रारंभ करें:

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

रैंडमआईडी() फ़ंक्शन दस्तावेज़ के भीतर फॉर्म फ़ील्ड की पहचान करने के लिए आईडी उत्पन्न करेगा। फ़ील्डटाइप एसडीके में उपलब्ध पूर्वनिर्धारित फ़ील्ड प्रकारों के तेज़ संदर्भ के लिए एक शॉर्टकट है। प्रत्येक प्रपत्र फ़ील्ड प्रविष्टि में शामिल हैं:

उपयोगकर्ता को इसके उपयोग के बारे में सूचित करने के लिए एक लेबल
खींचे गए तत्वों को मेटाडेटा प्रविष्टियों से मिलान करने के लिए एक नाम
फ़ील्ड के प्रकार को इंगित करने के लिए एक प्रकार
पीडीएफ के भीतर स्थिति आयत की गणना के लिए चौड़ाई और height

अंत में, कॉम्बोबॉक्सऑप्शन और लिस्टबॉक्सऑप्शन में उन फ़ील्ड के लिए नमूना विकल्प होते हैं जिनके लिए उपयोगकर्ताओं को एक का चयन करना होता है।

खींचें और छोड़ें तत्व बनाना

मेटाडेटा तैयार होने पर, आप ड्रैग और ड्रॉप के तर्क, साथ ही फॉर्म फ़ील्ड प्लेसमेंट को संभालने के लिए एक फ़ंक्शन बना सकते हैं:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

फ़ंक्शन PDFDoc - एक SDK ऑब्जेक्ट जो एक PDF दस्तावेज़ का प्रतिनिधित्व करता है - को एक तर्क के रूप में स्वीकार करता है। इसका उपयोग पीडीएफफॉर्म ऑब्जेक्ट को पुनः प्राप्त करने के लिए किया जाता है, जिसका उपयोग फॉर्म फ़ील्ड को जोड़ने और कॉन्फ़िगर करने के लिए किया जाएगा, उन फ़ील्ड को ड्रैग करने योग्य तत्वों में संसाधित करने और साइड मेनू में जोड़ने के बाद।

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

LoadFormFieldsMenu() फ़ंक्शन के लिए आवश्यक PDFDoc पैरामीटर प्राप्त करने के लिए, आपको इसे नीचे दिए अनुसार संशोधित करके लोडपीडीएफ() फ़ंक्शन का परिणामी वादा प्राप्त करना होगा:

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

मेनू आइटम बनाए जाने के साथ, ऐप अब इस तरह दिखता है:

खींचें और छोड़ें कार्यक्षमता को कार्यान्वित करना

ड्रैग करने योग्य तत्वों को बनाने के बाद, ड्रैग और ड्रॉप कार्यक्षमता को पूरी तरह से लागू करने और व्यूअर में फॉर्म फ़ील्ड बनाने की अनुमति देने का समय आ गया है:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

उपरोक्त कोड में, ड्रैगओवर इवेंट श्रोता stopDefault() को कॉल करके ड्रॉप इवेंट में संभाले जाने वाले इंटरैक्शन को अग्रेषित करता है।

ड्रॉप इवेंट हैंडलर के अंदर, मिलान किए गए मेटाडेटा को पहले खींचे गए तत्व के डेटा का उपयोग करके पुनर्प्राप्त किया जाता है। फिर, इवेंट से माउस की स्थिति को pdfViewer इंस्टेंस पर उपलब्ध ConvertClientCoordToPDFCoord() विधि का उपयोग करके पीडीएफ निर्देशांक में बदल दिया जाता है।

फ़ंक्शन में पहले बनाए गए PDFForm ऑब्जेक्ट से addControl() विधि कॉल में स्थिति, मेटाडेटा और यादृच्छिक रूप से जेनरेट की गई आईडी का उपयोग किया जाता है। विधि निम्नलिखित तर्क स्वीकार करती है:

प्रपत्र फ़ील्ड को रखने के लिए पृष्ठ का सूचकांक ( convertClientCoordToPDFCoord() कॉल से पुनर्प्राप्त)
नव निर्मित प्रपत्र फ़ील्ड के लिए यादृच्छिक रूप से जेनरेट की गई आईडी
दिए गए स्थिरांक के अनुसार प्रपत्र फ़ील्ड का प्रकार (मेटाडेटा से पुनर्प्राप्त)
वह तर्क जो एक आयत के रूप में प्रपत्र फ़ील्ड के स्थान को परिभाषित करता है, माउस को प्रपत्र फ़ील्ड के केंद्र का समन्वय करने के लिए चौड़ाई और ऊंचाई का उपयोग करके गणना की जाती है

अंत में, यदि फ़ील्ड विकल्पों की सूची स्वीकार करता है, तो इसे सबसे पहले आईडी का उपयोग करके पीडीएफफॉर्म ऑब्जेक्ट की getField() विधि द्वारा एक्सेस किया जाता है। विकल्प setOptions() विधि का उपयोग करके तदनुसार सेट किए जाते हैं।

अंतिम ऐप, जिसमें पहले से ही कुछ फॉर्म फ़ील्ड रखे गए हैं, इस तरह दिखता है:

निष्कर्ष

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

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

संभावनाओं को गहराई से जानने के लिए, एसडीके द्वारा उपलब्ध कराए गए आधिकारिक दस्तावेज और अतिरिक्त संसाधनों को देखें। दस्तावेज़ीकरण आपको उन्नत सुविधाओं, अनुकूलन विकल्पों और सर्वोत्तम प्रथाओं के माध्यम से मार्गदर्शन करेगा।

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