ডেভেলপাররা ক্রমাগত PDF ভিউয়ারকে অবমূল্যায়ন করেন। এটি দেখতে একটি সাধারণ 'ফাইল-ইন-এ-বক্স' সমস্যার মতো মনে হয়। আপনি বাইটগুলো নিয়ে আসেন, একটি কম্পোনেন্টকে URL-এর দিকে নির্দেশ করেন এবং কাজ শেষ বলে ধরে নেন। Vue.js বেশিরভাগ UI কাজকে খুব সহজ করে তোলে, তবুও একটি প্রোডাকশন-রেডি PDF ভিউয়ার এমন একটি ফিচার যা নিঃশব্দে পুরো স্প্রিন্ট (sprint) দখল করে নিতে পারে। আমি দুই সপ্তাহে চারটি ভিন্ন উপায়ে একই ভিউয়ার তৈরি করেছি। প্রতিটি প্রচেষ্টা একই কথা মনে করিয়ে দিয়েছে: আপনি সোমবার যে লাইব্রেরিটি বেছে নেবেন, তা নির্ধারণ করে দেয় যে দুই মাস পরে আপনি কোন বাগ (bug) ডিবাগ করবেন।
সেকেলে টিউটোরিয়ালের ফাঁদ
বেশিরভাগ গাইড এখনও এমন লাইব্রেরি রিকমেন্ড করে যা শেষবার আপডেট করা হয়েছিল যখন Vue 2 ছিল ডিফল্ট। একজন ডেভেলপার README দ্রুত দেখে নেন, ইনস্টল কমান্ডটি চালান এবং ধরে নেন যে কঠিন অংশটি শেষ হয়ে গেছে। বাস্তবে, কঠিন অংশটি কেবল শুরু হয়েছে। আপনার সার্চ (search) ফিচারের প্রয়োজন হবে। ব্রাউজার ট্যাব ক্র্যাশ না করে আপনাকে ৪০০ পৃষ্ঠার একটি পলিসি ডকুমেন্ট হ্যান্ডেল করতে হবে। মোবাইলের কেউ জিজ্ঞেস করবে কেন pinch-to-zoom ঠিকমতো কাজ করছে না। README খুব কমই আপনাকে এগুলোর বিষয়ে সতর্ক করে কারণ ডেমোটি কেবল একটি পাঁচ পৃষ্ঠার একাডেমিক পেপারের প্রথম পৃষ্ঠা রেন্ডার করে।
চারটি পদ্ধতি
Vue-এর জন্য কোনো একটি একক সেরা PDF লাইব্রেরি নেই। আপনার ব্যবহারকারীরা আসলে যা করার চেষ্টা করছেন, তার জন্য কেবল সেরা ফিট (fit) বা সামঞ্জস্যপূর্ণ লাইব্রেরিটিই আছে।
PDF.js: DIY বা নিজে করার পথ
Mozilla-এর PDF.js হলো প্রায় প্রতিটি ওয়েব-ভিত্তিক ভিউয়ারের পেছনের ইঞ্জিন। এটিকে একটি Vue 3 অ্যাপে ব্যবহার করার অর্থ কেবল একটি কম্পোনেন্ট ইনস্টল করা নয়; এর অর্থ একটি প্রজেক্ট গ্রহণ করা। আপনি getDocument দিয়ে ডকুমেন্টটি ফেচ করেন, প্রতিটি পৃষ্ঠা একটি <canvas> এলিমেন্টে রেন্ডার করেন এবং সেই ক্যানভাসগুলোকে আপনার টেমপ্লেটে যুক্ত করেন। প্রথম দিন আপনি খুব প্রোডাক্টিভ বোধ করবেন। তৃতীয় দিনের মধ্যে, আপনি Vite bundling এবং CORS হেডারগুলোর সাথে সামঞ্জস্যপূর্ণ করার জন্য ওয়ার্কার স্ক্রিপ্ট (worker script) কনফিগার করতে ব্যস্ত হয়ে পড়বেন।
দশটি পৃষ্ঠার জন্য নেটিভ ব্রাউজার স্ক্রল ঠিকঠাক কাজ করে। কিন্তু হাজার পৃষ্ঠার ক্ষেত্রে এটি আটকে যায়, তাই আপনি ভার্চুয়াল স্ক্রলিং (virtual scrolling) তৈরি করেন। তারপর আপনি লক্ষ্য করেন যে টেক্সট সিলেক্ট করা যাচ্ছে না, তাই প্রতিটি ক্যানভাসের উপরে আপনি স্বচ্ছ টেক্সট ডিভ (transparent text divs) ওভারলে হিসেবে বসান। প্রিন্টিং ঝাপসা দেখায়, তাই আপনি DPI সেটিংস এবং মিডিয়া কোয়েরি নিয়ে কাজ করেন। মোবাইলের pinch-to-zoom ব্রাউজারের নেটিভ জেসচার হ্যান্ডলিংয়ের সাথে সংঘর্ষ তৈরি করে। ক্রস-ডকুমেন্ট সার্চ মানে প্রতিটি পৃষ্ঠার টেক্সট অ্যাসিনক্রোনাসলি (asynchronously) এক্সট্র্যাক্ট এবং ইনডেক্স করা, তারপর একটি UI তৈরি করা যা মেইন থ্রেড ব্লক না করেই ফলাফলগুলো কিউ (queue) করে। Cursor-এর মতো AI কোডিং অ্যাসিস্ট্যান্ট দিয়ে বয়লারপ্লেট (boilerplate) তৈরি করা গেলেও, আর্কিটেকচারের দায়িত্ব আপনারই থাকে। কঠিন অংশগুলো অদৃশ্য হয়ে যায় না; সেগুলো আপনার কোডবেসে স্থানান্তরিত হয়। এই পথটি কেবল তখনই যুক্তিযুক্ত যখন আপনার প্রয়োজনীয়তা অত্যন্ত সুনির্দিষ্ট হয়, অথবা যখন আপনার হাতে কয়েক সপ্তাহ সময় থাকে এবং রেডিমেড ফিচারের পরিবর্তে কাস্টম কিছু করার জোরালো কারণ থাকে।
vue-pdf-embed: হালকা ওজনের পথ
কখনও কখনও আপনার যা প্রয়োজন তা হলো কেবল ফাইলটি দেখানো। vue-pdf-embed হলো একটি Vue 3 কম্পোনেন্ট যা একটি সোর্স গ্রহণ করে এবং পৃষ্ঠাগুলোকে একটি ভার্টিক্যাল স্ট্যাকে রেন্ডার করে। ইনস্টলেশন এবং ইন্টিগ্রেশন করতে মাত্র কয়েক মিনিট সময় লাগে। জেনারেট করা ইনভয়েস বা কমপ্লায়েন্স রিপোর্ট দেখানোর জন্য একটি ইন্টারনাল অ্যাডমিন প্যানেলের ক্ষেত্রে এটি প্রায়শই যথেষ্ট। কম্পোনেন্টটি ক্যানভাস রেন্ডারিং হ্যান্ডেল করে এবং আপনার ব্যবহারকারীরা স্ক্রল করতে পারেন।
বিনিময়ে আপনাকে অনেক কিছু হারাতে হবে। এতে কোনো টুলবার নেই, কোনো ডকুমেন্ট সার্চ নেই, কোনো থাম্বনেইল সাইডবার নেই এবং স্ক্রল কন্টেইনারের মাধ্যমে স্ক্রল করা ছাড়া কোনো পেজ নেভিগেশন নেই। কোনো স্টেকহোল্ডার যখন জিজ্ঞেস করবেন, "আমি কি ইনভয়েস নম্বরটি সার্চ করতে পারি?" তখন আপনার দুই ঘণ্টার ইন্টিগ্রেশন একটি কাস্টম বিল্ডে পরিণত হবে। এটি তখন বেছে নিন যখন আপনার PDF গুলো ছোট হয়, আপনার অডিয়েন্স ইন্টারনাল হয় এবং ইন্টারঅ্যাকশন মডেলটি শুধুমাত্র রিড-অনলি স্ক্রলিং হয়।
@tato30/vue-pdf: নিয়ন্ত্রণের পথ
এই লাইব্রেরিটি একটি মনোলিথিক কম্পোনেন্ট থেকে একটি কম্পোজেবল (composable)-এ রূপান্তরিত হয়। এটি usePDF এক্সপোজ করে, যা আপনি আপনার setup ব্লকের ভেতরে কল করেন। পুরো একটি স্ক্রোলেবল ডকুমেন্ট রেন্ডার করার পরিবর্তে, আপনি রিঅ্যাক্টিভ রেফ (reactive refs)-এর মাধ্যমে একবারে একটি পৃষ্ঠা পরিচালনা করেন। এটি অতিরিক্ত কাজ মনে হতে পারে, কিন্তু যখন ইন্টারফেসের ক্ষেত্রে নিখুঁত নির্ভুলতা প্রয়োজন হয়, তখন এটি মুক্তিদায়ক।
একটি ইন্স্যুরেন্স ক্লেইম রিভিউ টুলের কথা কল্পনা করুন যেখানে অ্যাডজাস্টাররা একটি ডকুমেন্টের পৃষ্ঠা যাচাই করেন, 'Next' ক্লিক করেন এবং সিস্টেম প্রতিটি ভিউয়িং ইভেন্ট লগ করে। এখানে একটি কন্টিনিউয়াস স্ক্রোলেবল ভিউয়ার ভুল মেটাফর হবে। আপনি একটি নিয়ন্ত্রিত পেজিনেটর (paginator) চান, হয়তো পেজ-লেভেল কমেন্টিং বা সরাসরি বর্তমান পেজ ইনডেক্সের সাথে যুক্ত অ্যাপ্রুভাল বাটন সহ। যেহেতু usePDF আপনাকে পেজ কাউন্ট এবং বর্তমান পৃষ্ঠা রিঅ্যাক্টিভ ডেটা হিসেবে প্রদান করে, তাই এটিকে একটি কাস্টম নেভিগেশন বার বা প্রগ্রেস ইন্ডিকেটরের সাথে যুক্ত করা খুব স্বাভাবিক মনে হয়। আপনি ক্যানভাসের চারপাশে নিজস্ব UI তৈরি করবেন ঠিকই, কিন্তু লো-লেভেল রেন্ডারিং বয়লারপ্লেট থেকে মুক্তি পাবেন। এটি সেইসব অ্যাপের জন্য উপযুক্ত যেখানে ব্যবহারকারীরা পুরো পাণ্ডুলিপি স্ক্যান করার পরিবর্তে এক এক করে পৃষ্ঠাগুলো দেখে যান।
Vue PDF Viewer: ফুল-সার্ভিস পথ
এমন একটি সময় আসে যখন ভিউয়ার ফিচারগুলো পুনরায় তৈরি করা আপনার আসল পণ্য থেকে মনোযোগ সরিয়ে নেওয়ার মতো হয়ে দাঁড়ায়। Vue PDF Viewer হলো একটি কমার্শিয়াল কম্পোনেন্ট যা একটি পূর্ণাঙ্গ টুলবার, টেক্সট সার্চ, অ্যানোটেশন, মোবাইল রেসপন্সিভনেস এবং ভার্চুয়াল স্ক্রলিং নিয়ে আসে, যা ইতিমধ্যে বিভিন্ন এজ কেস (edge cases) পরীক্ষা করা হয়েছে। আপনার কাজ তখন নতুন কিছু উদ্ভাবন করার পরিবর্তে কনফিগারেশন করা। আপনি আপনার ডিজাইন সিস্টেমের সাথে সামঞ্জস্য রাখতে থিমটি অ্যাডজাস্ট করবেন, আপনার প্রয়োজনীয় ফিচারগুলো টগল করবেন এবং সেই কাজে মনোনিবেশ করবেন যা প্রকৃতপক্ষে আপনার অ্যাপকে অন্যদের থেকে আলাদা করে।
লাইসেন্সের জন্য অগ্রিম ফি দিতে হয় ঠিকই, কিন্তু সার্চ ইনডেক্সিং এবং অ্যানোটেশন লেয়ারগুলো পুনরায় তৈরি করতে যে দুই সপ্তাহের ইঞ্জিনিয়ারিং সময় ব্যয় হয়, তার খরচও কিন্তু কম নয়। যখন আপনি একটি নির্দিষ্ট ডেডলাইনের মধ্যে প্রোডাকশন অ্যাপ রিলিজ করছেন এবং আপনার ব্যবহারকারীরা ডেস্কটপ PDF সফটওয়্যারের মতো অভিজ্ঞতা আশা করেন, তখন এটিই সঠিক টুল।
ইনস্টলেশনের প্রকৃত খরচ কত
সবচেয়ে বড় ভুল হলো npm install কমান্ডটিকে মোট খরচ হিসেবে বিবেচনা করা। আসল খরচ হলো ইনস্টলেশন শেষ হওয়ার পর আপনি যা তৈরি করেন। একটি লাইটওয়েট লাইব্রেরি প্রথম দিন সস্তা মনে হলেও বিশতম দিনে যখন আপনি বুঝতে পারবেন যে আপনার একটি সার্চ বার প্রয়োজন, তখন সেটি ব্যয়বহুল হয়ে দাঁড়ায়। DIY পদ্ধতি প্রথম দিন বিনামূল্যে মনে হলেও ষাটতম দিনে যখন আপনি এখনও মোবাইল টাচ টার্গেট এবং প্রিন্ট স্টাইলশিট ঠিক করার কাজ করছেন, তখন এটি ব্যয়বহুল হয়ে পড়ে। কমার্শিয়াল পদ্ধতিতে শুরুতে টাকা খরচ হয়, কিন্তু এটি আপনার ইঞ্জিনিয়ারিংয়ের কয়েক সপ্তাহ বাঁচিয়ে দিতে পারে যা আপনি আপনার আসল বিজনেস লজিকের কাজে ব্যয় করতে পারেন।
শুধুমাত্র README ফাইলটি ছোট এবং সহজবোধ্য বলে কোনো লাইব্রেরি বেছে নেবেন না। আপনার প্রজেক্টের প্রয়োজনীয়তার ওপর ভিত্তি করে এটি নির্বাচন করুন। থাম্বনেইল সাইডবার, টেক্সট সার্চ এবং ক্লায়েন্ট-সাইড অ্যানোটেশনের প্রয়োজন থাকলে আপনি একটি ফুল-সার্ভিস সলিউশনের দিকে ঝুঁকবেন। একটি ইন্টারনাল ড্যাশবোর্ডের ভেতরে দ্রুত রসিদ প্রিভিউ দেখার প্রয়োজন থাকলে আপনি লাইটওয়েট এমবেড (lightweight embed) বেছে নেবেন।
মূল কথা
যেকোনো Vue PDF লাইব্রেরি বেছে নেওয়ার আগে, আপনার ব্যবহারকারীদের ঠিক কী কী করার প্রয়োজন তা লিখে ফেলুন। যদি তাদের কেবল ছোট ডকুমেন্টগুলো স্ক্রল করার প্রয়োজন হয়, তবে vue-pdf-embed আপনার জন্য যথেষ্ট হবে। যদি তারা একটি নিয়ন্ত্রিত ওয়ার্কফ্লোতে পৃষ্ঠাগুলো দেখে, তবে @tato30/vue-pdf ব্যবহার করুন। যদি তারা একটি বিজনেস-ক্রিটিক্যাল অ্যাপের ভেতরে অ্যানোটেশন, সার্চ এবং প্রিন্ট করার প্রয়োজন বোধ করে, তবে কমার্শিয়াল ভিউয়ারটি কিনে নিন। আর যদি আপনার প্রয়োজনীয়তাগুলো সত্যিই অনন্য হয় কিন্তু আপনার সময়সীমা নমনীয় হয়, তবে কয়েক সপ্তাহ সময় বরাদ্দ করুন এবং সরাসরি PDF.js এর ওপর ভিত্তি করে তৈরি করুন। একটি PDF ভিউয়ার কখনোই কেবল একটি সাধারণ ফাইল নয়। এটি একটি পূর্ণাঙ্গ ডকুমেন্ট ইন্টারফেস, এবং আপনার বেছে নেওয়া বিল্ডিং ব্লকটিই নির্ধারণ করবে আপনি এই মাসে রিলিজ করবেন নাকি পরবর্তী কোয়ার্টারে।