4,090 পড়া

ওয়েবের জন্য Foxit PDF SDK ব্যবহার করে কাস্টম ফর্ম ফিল্ড তৈরি করার জন্য একটি গাইড

দ্বারা Foxit Software8m2023/11/17

অতিদীর্ঘ; পড়তে

এই টিউটোরিয়ালটি আপনাকে শেখাবে কিভাবে ওয়েবের জন্য Foxit PDF Library ব্যবহার করে আপনার ওয়েব ব্রাউজার PDF ডক্সে কাস্টম ফর্ম ফিল্ড তৈরি করতে হয়।

featured image - ওয়েবের জন্য Foxit PDF SDK ব্যবহার করে কাস্টম ফর্ম ফিল্ড তৈরি করার জন্য একটি গাইড

পিডিএফ ফরম্যাটটি আধুনিক সফ্টওয়্যারটিতে অপরিহার্য হয়ে উঠেছে, যা বিভিন্ন ধরনের নথির জন্য বহুমুখী সমাধান হিসেবে কাজ করে। নিরাপদ, সম্পাদনাযোগ্য, এবং ব্যবহারকারী-বান্ধব PDF খুঁজছেন ব্যবসার জন্য, Foxit একটি মূল্যবান পছন্দ হিসাবে আবির্ভূত হয়। Foxit-এর PDF SDK লাইব্রেরিগুলি বিভিন্ন শিল্পের জন্য বৈশিষ্ট্যগুলির একটি সমৃদ্ধ বিন্যাস নিয়ে গর্ব করে৷

ওয়েব ব্রাউজার-ভিত্তিক পিডিএফ, বিশেষ করে, ডকুমেন্ট ম্যানেজমেন্টে অসংখ্য অ্যাপ্লিকেশন খুঁজুন। তারা মাসিক স্টেটমেন্ট তৈরি করার মতো কাজগুলি সহজতর করে অসংখ্য ব্যাঙ্কিং সিস্টেমে গুরুত্বপূর্ণ ভূমিকা পালন করে। উপরন্তু, কমপ্লায়েন্স ইন্ডাস্ট্রি নিরাপদ ডেটা সংগ্রহ এবং স্টোরেজের জন্য ওয়েব-ভিত্তিক PDF-এর উপর নির্ভর করে।

এই টিউটোরিয়ালটি আপনাকে আপনার ওয়েব ব্রাউজার পিডিএফ ডকুমেন্টের মধ্যে কাস্টমাইজড ফর্ম ফিল্ড তৈরি করতে ওয়েবের জন্য Foxit PDF SDK ব্যবহার করার মাধ্যমে গাইড করে। সহগামী GitHub সংগ্রহস্থল আপনাকে টিউটোরিয়ালে বর্ণিত পদক্ষেপগুলি অনুসরণ করতে এবং বাস্তবায়ন করতে দেয়।

ওয়েবের জন্য Foxit PDF SDK কি?

ওয়েবের জন্য Foxit PDF SDK , Foxit দ্বারা অফার করা বিভিন্ন PDF SDK-এর মধ্যে, একটি সর্ব-বিস্তৃত PDF লাইব্রেরি হিসাবে দাঁড়িয়েছে যা Foxit-এর রেন্ডারিং ইঞ্জিনের সুবিধাগুলিকে কাজে লাগায়৷ এই SDK আপনাকে নির্বিঘ্নে আপনার অ্যাপ্লিকেশনগুলিতে একটি ব্যাপক এবং সম্পূর্ণরূপে কাস্টমাইজযোগ্য PDF ভিউয়ারকে সংহত করার ক্ষমতা দেয়৷

Foxit-এর SDK-এর সাহায্যে তৈরি করা ওয়েব PDFগুলি ব্যবহারকারীদের জাভাস্ক্রিপ্ট ব্যবহার করে সরাসরি তাদের মোবাইল বা ডেস্কটপ ব্রাউজার থেকে বিভিন্ন ভাষায় নথিগুলি দেখতে, পূরণ করতে, টীকা করতে এবং স্বাক্ষর করতে সক্ষম করে৷ SDK ফায়ারফক্স, সাফারি, ক্রোম এবং অপেরা সহ সমস্ত প্রধান ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ।

কার্যকারিতা চিত্রিত করার জন্য, আপনি একটি টেমপ্লেট থেকে একটি নতুন PDF প্রকল্প তৈরি করতে শুরু করবেন, প্রয়োজনীয় কাঠামো প্রদানের জন্য ওয়েবের জন্য Foxit PDF SDK ব্যবহার করবেন। এই হ্যান্ডস-অন পদ্ধতিটি আপনার ওয়েব-ভিত্তিক প্রকল্পগুলির মধ্যে SDK কীভাবে পিডিএফ ক্ষমতা বাড়ায় তার একটি ব্যবহারিক প্রদর্শনের প্রস্তাব দেবে।

ওয়েবের জন্য Foxit PDF SDK বাস্তবায়ন করা হচ্ছে

ওয়েবের জন্য Foxit PDF SDK ডাউনলোড করুন । জিপ ফাইলে SDK, ডকুমেন্টেশন এবং উদাহরণ থাকা উচিত।

আপনি আনজিপ করা ডিরেক্টরি থেকে একটি HTTP সার্ভার চালিয়ে এই উদাহরণগুলির পূর্বরূপ দেখতে পারেন।

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

প্রজেক্ট সেটআপ করুন

এই টিউটোরিয়ালটি ফ্রন্টএন্ড টুলিংয়ের জন্য Vite ব্যবহার করে। এটি ES মডিউল (ESM) এর উপর ভিত্তি করে, দ্রুত, এবং বক্সের বাইরে SDK ব্যবহার করার জন্য আপনার প্রয়োজনীয় সমস্ত কিছুর সাথে আসে। একটি টেমপ্লেট থেকে একটি নতুন প্রকল্প তৈরি করতে এবং ডেভেলপমেন্ট সার্ভার শুরু করতে, নিশ্চিত করুন যে আপনি Node.js সংস্করণ 12.2.0 বা নতুনটি পেয়েছেন এবং নিম্নলিখিত কমান্ডগুলি চালান:

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

তৈরি করা ডিরেক্টরিতে SDK সরান। এই টিউটোরিয়ালের বাকি অংশের জন্য, SDK ./FoxitPDFSDKForWeb- এ উপলব্ধ বলে ধরে নেওয়া হচ্ছে, মূল প্রকল্প ডিরেক্টরির সাপেক্ষে।

পিডিএফ লোড হচ্ছে

পরীক্ষা শুরু করার জন্য আপলোড করা একটি নথি সহ আপনার একটি PDF ভিউয়ারের প্রয়োজন হবে৷ পিডিএফ ভিউয়ার শুরু করতে, প্রথমে এইচটিএমএল স্ট্রাকচার তৈরি করুন এবং SDK লোড করুন।

 <!-- 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), }, });

আপনি ./FoxitPDFSDKForWeb/examples/license-key.js ফাইলের ভিতরে লাইসেন্সএসএন এবং লাইসেন্সকির জন্য আপনার মানগুলি খুঁজে পেতে পারেন।

পিডিএফভিউয়ারটি কনস্ট্রাক্টরকে একটি কনফিগারেশন অবজেক্ট সহ প্রদান করে তৈরি করা হয়েছে:

libPath: আনজিপ করা SDK প্যাকেজের lib ফোল্ডারের আপেক্ষিক পথ
jr: JR ইঞ্জিনের কনফিগার অপশন যার মধ্যে সবচেয়ে গুরুত্বপূর্ণভাবে লাইসেন্সিং তথ্য অন্তর্ভুক্ত রয়েছে
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() পদ্ধতি ব্যবহার করে ভিউয়ারে খোলে। ব্যবহৃত PDF নথিটি SDK-এর অন্তর্ভুক্ত ডকুমেন্টেশন থেকে একটি ডেমো গাইড।

ডানদিকে অতিরিক্ত স্থানটি টেনে নেওয়া যায় এমন ফর্ম ক্ষেত্রগুলির জন্য একটি মেনু হিসাবে কাজ করবে৷

কাস্টম ফর্ম ক্ষেত্র তৈরি করা হচ্ছে

Foxit SDK দিয়ে একটি ফর্ম ফিল্ড তৈরি করতে আপনার যা দরকার তা হল একজন ভিউয়ার, ফর্ম ফিল্ডের মেটাডেটা (যেমন ফিল্ড টাইপ বা সিলেক্ট অপশন), এবং ফর্ম ফিল্ড পজিশন। এই উদাহরণের জন্য, আপনি প্রস্তুত মেটাডেটা সহ পূর্বনির্ধারিত ফর্ম ক্ষেত্রগুলির একটি সেট তৈরি করবেন যা ব্যবহারকারী ভিউয়ারে টেনে নিয়ে যেতে পারে।

মেটাডেটা সংজ্ঞায়িত করা

অনুমোদিত ক্ষেত্রগুলির পাশাপাশি অতিরিক্ত সাহায্যকারীর জন্য মেটাডেটা সংজ্ঞায়িত করে শুরু করুন:

 // ... 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;

randomId() ফাংশনটি নথির মধ্যে ফর্ম ক্ষেত্রগুলি সনাক্ত করতে আইডি তৈরি করবে। FieldTypes হল SDK-এ উপলব্ধ পূর্বনির্ধারিত ক্ষেত্র প্রকারের দ্রুত রেফারেন্সের জন্য একটি শর্টকাট। প্রতিটি ফর্ম ফিল্ড এন্ট্রিতে রয়েছে:

ব্যবহারকারীকে এর ব্যবহার সম্পর্কে অবহিত করার জন্য একটি লেবেল
মেটাডেটা এন্ট্রিতে টেনে আনা উপাদানগুলিকে মেলানোর জন্য একটি নাম৷
ক্ষেত্রের ধরন নির্দেশ করার জন্য একটি প্রকার
PDF এর মধ্যে অবস্থান আয়তক্ষেত্র গণনা করার জন্য একটি প্রস্থ এবং 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 অবজেক্ট যা পিডিএফ ডকুমেন্টের প্রতিনিধিত্ব করে—একটি যুক্তি হিসেবে গ্রহণ করে। এটি একটি PDFForm অবজেক্ট পুনরুদ্ধার করতে ব্যবহৃত হয়, যেটি ফর্ম ক্ষেত্রগুলি যোগ এবং কনফিগার করতে ব্যবহার করা হবে, সেই ক্ষেত্রগুলিকে টেনে আনা যায় এমন উপাদানগুলিতে প্রক্রিয়া করা হয় এবং পাশের মেনুতে যোগ করা হয়৷

প্রতিটি উপাদানের একটি ড্র্যাগযোগ্য বৈশিষ্ট্য রয়েছে যা টেনে আনার অনুমতি দেওয়ার জন্য সত্য হিসাবে সেট করা হয়েছে, সেইসাথে অন্তর্নিহিত মেটাডেটার সাথে তাদের মেলানোর জন্য প্রতিটি ফর্ম ক্ষেত্রের অনন্য নামের সাথে সম্পর্কিত একটি আইডি রয়েছে৷ এই আইডিটি পরে ড্র্যাগস্টার্ট ইভেন্ট লিসেনারের ভিতরে ড্র্যাগ এবং ড্রপ অ্যাকশনের সময় এটি স্থানান্তর করতে ব্যবহার করা হয়।

loadFormFieldsMenu() ফাংশনের জন্য প্রয়োজনীয় PDFDoc প্যারামিটার পেতে, আপনাকে loadPDF() ফাংশনের ফলস্বরূপ প্রতিশ্রুতি পেতে হবে এটিকে নীচের মত করে সংশোধন করে:

 // ... 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); } }); }; // ...

উপরের কোডে, ড্রাগওভার ইভেন্ট শ্রোতা ড্রপ ইভেন্টে হ্যান্ডেল করা ইন্টারঅ্যাকশনটি প্রতিরোধ ডিফল্ট() কল করে ফরওয়ার্ড করে।

ড্রপ ইভেন্ট হ্যান্ডলারের ভিতরে, টেনে আনা উপাদানের ডেটা ব্যবহার করে ম্যাচিং মেটাডেটা প্রথমে পুনরুদ্ধার করা হয়। তারপরে, ইভেন্ট থেকে মাউসের অবস্থান পিডিএফ কোঅর্ডিনেটে রূপান্তরিত হয় কনভার্টক্লিয়েন্টকোরডটিওপিডিএফসিওর্ড() পদ্ধতিটি ব্যবহার করে যা pdfViewer উদাহরণে উপলব্ধ।

পজিশন, মেটাডেটা এবং এলোমেলোভাবে তৈরি আইডি ফাংশনের আগে তৈরি করা PDFForm অবজেক্ট থেকে addControl() মেথড কলে ব্যবহার করা হয়। পদ্ধতি নিম্নলিখিত আর্গুমেন্ট গ্রহণ করে:

ফর্ম ফিল্ডে রাখার জন্য পৃষ্ঠার সূচী ( convertClientCoordToPDFCoord() কল থেকে পুনরুদ্ধার করা হয়েছে)
নতুন তৈরি ফর্ম ক্ষেত্রের জন্য এলোমেলোভাবে তৈরি করা ID
প্রদত্ত ধ্রুবক অনুযায়ী ফর্ম ক্ষেত্রের ধরন (মেটাডেটা থেকে পুনরুদ্ধার করা হয়েছে)
একটি আয়তক্ষেত্রের আকারে ফর্ম ক্ষেত্রের স্থান নির্ধারণকারী যুক্তি, যা মাউসকে ফর্ম ক্ষেত্রের কেন্দ্রে স্থানাঙ্কিত করতে প্রস্থ এবং উচ্চতা ব্যবহার করে গণনা করা হয়

অবশেষে, যদি ক্ষেত্রের বিকল্পগুলির একটি তালিকা গ্রহণ করে, এটি প্রথমে ID ব্যবহার করে PDFForm অবজেক্টের getField() পদ্ধতির মাধ্যমে অ্যাক্সেস করা হয়। setOptions() পদ্ধতি ব্যবহার করে বিকল্পগুলি সেই অনুযায়ী সেট করা হয়।

ইতিমধ্যে কয়েকটি ফর্ম ক্ষেত্র সহ চূড়ান্ত অ্যাপটি এইরকম দেখাচ্ছে:

উপসংহার

আপনার পিডিএফগুলিতে কার্যকারিতা যুক্ত করা সত্যিই আপনার সংস্থা এবং ব্যবহারকারীদের জন্য উল্লেখযোগ্য সুবিধা আনতে পারে। বৈদ্যুতিন আপডেট এবং স্বাক্ষরগুলি সময়, অর্থ এবং প্রচেষ্টা সাশ্রয় করে, যখন কাস্টমাইজড এবং সুরক্ষিত নথিগুলি আপনার কোম্পানির প্রতি আস্থা বাড়ায়৷

পূর্বে প্রদর্শিত হিসাবে, Foxit-এর বহুভাষিক PDF টুল, ওয়েবের জন্য Foxit PDF SDK-এর সাথে মিলিত, একটি শক্তিশালী সমাধান প্রদান করে। আপনি কাস্টম ফর্ম ক্ষেত্র তৈরি করতে পারেন, ড্র্যাগ-এন্ড-ড্রপ কার্যকারিতা প্রয়োগ করতে পারেন এবং বিভিন্ন ক্ষমতার সীমা আনলক করতে পারেন। যাইহোক, এটি হিমশৈলের টিপ মাত্র। ওয়েবের জন্য Foxit PDF SDK আপনার PDF কার্যকারিতা আরও উন্নত করার জন্য বৈশিষ্ট্যগুলির একটি বিস্তৃত সেট অফার করে৷

সম্ভাবনার গভীরে অনুসন্ধান করতে, SDK দ্বারা প্রদত্ত অফিসিয়াল ডকুমেন্টেশন এবং অতিরিক্ত সংস্থানগুলি পড়ুন৷ ডকুমেন্টেশন আপনাকে উন্নত বৈশিষ্ট্য, কাস্টমাইজেশন বিকল্প এবং সেরা অনুশীলনের মাধ্যমে গাইড করবে।

আপনি যদি টিউটোরিয়ালটি পর্যালোচনা করতে চান বা আপনার কাজ পরীক্ষা করতে চান তবে আপনি টিউটোরিয়ালের সাথে যুক্ত GitHub সংগ্রহস্থলটি উল্লেখ করতে পারেন। রিপোজিটরিতে সম্ভবত সোর্স কোড, উদাহরণ এবং অতিরিক্ত উপকরণ রয়েছে যা আপনাকে টিউটোরিয়ালের অন্তর্ভুক্ত ধারণাগুলি বুঝতে এবং বাস্তবায়ন করতে সহায়তা করবে।