ڈویلپرز مستقل طور پر PDF ویورز کو کم اہمیت دیتے ہیں۔ یہ ایک سادہ سے "فائل-ان-اے-باکس" مسئلے کی طرح لگتا ہے۔ آپ بائٹس (bytes) حاصل کرتے ہیں، ایک کمپوننٹ کو URL کی طرف اشارہ کرتے ہیں، اور سمجھ لیتے ہیں کہ کام ہو گیا۔ Vue.js زیادہ تر UI کے کام کو اتنا ہی سادہ محسوس کرواتا ہے، پھر بھی ایک پروڈکشن کے قابل (production-ready) PDF ویور ان فیچرز میں سے ایک ہے جو خاموشی سے پورے اسپرنٹس (sprints) کو اپنی لپیٹ میں لے لیتا ہے۔ میں نے دو ہفتوں کے دوران چار مختلف طریقوں سے ایک ہی ویور بنایا۔ ہر کوشش نے ایک ہی بات ثابت کی: پیر کے دن آپ جو لائبریری منتخب کرتے ہیں، وہی یہ طے کرتی ہے کہ دو ماہ بعد آپ کن بگز (bugs) کو ٹھیک کر رہے ہوں گے۔
پرانے ہو چکے ٹیوٹوریل کا جال
زیادہ تر گائیڈز اب بھی ایسی لائبریریز کی سفارش کرتی ہیں جن کی آخری اپ ڈیٹ اس وقت ہوئی تھی جب Vue 2 ڈیفالٹ تھا۔ ایک ڈویلپر README پر نظر ڈالتا ہے، انسٹال کمانڈ چلاتا ہے، اور فرض کر لیتا ہے کہ مشکل حصہ ختم ہو گیا۔ حقیقت میں، مشکل حصہ تو ابھی شروع ہی ہوا ہے۔ آپ کو سرچ (search) کی ضرورت ہوگی۔ آپ کو براؤزر ٹیب کو کریش کیے بغیر 400 صفحات کی پالیسی دستاویز کو سنبھالنا ہوگا۔ موبائل استعمال کرنے والا کوئی شخص پوچھے گا کہ پنچ-ٹو-زوم (pinch-to-zoom) کیوں خراب محسوس ہو رہا ہے۔ README میں شاذ و نادر ہی آپ کو ان میں سے کسی چیز کے بارے میں خبردار کیا جاتا ہے کیونکہ ڈیمو صرف پانچ صفحات کے تعلیمی مقالے کا پہلا صفحہ دکھاتا ہے۔
چار طریقے
Vue کے لیے کوئی ایک بہترین PDF لائبریری نہیں ہے۔ صرف وہ بہترین ہے جو آپ کے صارفین کے اصل مقصد کے لیے موزوں ہو۔
PDF.js: DIY راستہ
Mozilla کا PDF.js تقریباً ہر ویب پر مبنی ویور کے پیچھے موجود انجن ہے۔ اسے Vue 3 ایپ میں شامل کرنے کا مطلب صرف ایک کمپوننٹ انسٹال کرنا نہیں ہے؛ بلکہ اس کا مطلب ایک پورے پروجیکٹ کو اپنانا ہے۔ آپ getDocument کے ذریعے دستاویز حاصل کرتے ہیں، ہر صفحے کو <canvas> ایلیمنٹ پر رینڈر کرتے ہیں، اور ان کینوسز کو اپنے ٹیمپلیٹ کے ساتھ جوڑتے ہیں۔ پہلے دن آپ خود کو باصلاحیت محسوس کرتے ہیں۔ تیسرے دن تک، آپ ورکر اسکرپٹ (worker script) کو Vite بنڈنگ اور CORS ہیڈرز کے ساتھ ہم آہنگ کرنے کی کوشش کر رہے ہوتے ہیں۔
براؤزر کا نیٹیو اسکرول دس صفحات کے لیے ٹھیک کام کرتا ہے۔ ہزار صفحات پر یہ رک جاتا ہے، اس لیے آپ ورچوئل اسکرولنگ (virtual scrolling) بناتے ہیں۔ پھر آپ کو محسوس ہوتا ہے کہ ٹیکسٹ سلیکٹ نہیں کیا جا سکتا، اس لیے آپ ہر کینوس کے اوپر شفاف ٹیکسٹ ڈِوز (transparent text divs) لگاتے ہیں۔ پرنٹنگ دھندلی نظر آتی ہے، اس لیے آپ DPI سیٹنگز اور میڈیا کوئریز (media queries) کے پیچھے بھاگتے ہیں۔ موبائل پنچ-ٹو-زوم براؤزر کے نیٹیو جیسچر ہینڈلنگ (gesture handling) کے ساتھ ٹکرا جاتا ہے۔ کراس-ڈاکیومنٹ سرچ کا مطلب ہے ہر صفحے سے ٹیکسٹ کو غیر ہم آہنگ (asynchronously) طور پر نکالنا اور انڈیکس کرنا، پھر ایک ایسا UI بنانا جو مین تھریڈ (main thread) کو بلاک کیے بغیر نتائج کو قطار میں لگائے۔ یہاں تک کہ Cursor جیسے AI کوڈنگ اسسٹنٹ سے بوائلر پلیٹ (boilerplate) تیار کروانے کے باوجود، آرکیٹیکچر کی ذمہ داری آپ ہی کی ہوتی ہے۔ مشکل حصے غائب نہیں ہوتے؛ بلکہ وہ آپ کے کوڈ بیس (codebase) میں منتقل ہو جاتے ہیں۔ یہ راستہ صرف اس وقت منطقی ہے جب آپ کی ضروریات واقعی محدود ہوں، یا جب آپ کے پاس کئی ہفتے فارغ ہوں اور بنی بنائی چیز (off-the-shelf) کے بجائے کچھ مخصوص کرنے کی ٹھوس وجہ ہو۔
vue-pdf-embed: ہلکا پھلکا راستہ
کبھی کبھی آپ کو صرف فائل دکھانے کی ضرورت ہوتی ہے۔ vue-pdf-embed ایک Vue 3 کمپوننٹ ہے جو ایک سورس قبول کرتا ہے اور صفحات کو عمودی ترتیب (vertical stack) میں دکھاتا ہے۔ انسٹالیشن اور انٹیگریشن میں چند منٹ لگتے ہیں۔ تیار کردہ انوائسز یا تعمیل کی رپورٹس (compliance reports) دکھانے والے اندرونی ایڈمن پینل کے لیے، یہ اکثر کافی ہوتا ہے۔ کمپوننٹ کینوس رینڈرنگ کو سنبھالتا ہے، اور آپ کے صارفین اسکرول کر سکتے ہیں۔
اس کے بدلے میں آپ کو دوسری تمام سہولیات سے محروم رہنا پڑتا ہے۔ اس میں کوئی ٹول بار، کوئی ڈاکومنٹ سرچ، کوئی تھمب نیل سائیڈ بار، اور اسکرول کنٹینر کو اوپر نیچے کرنے کے علاوہ کوئی پیج نیویگیشن نہیں ہے۔ جس لمحہ کوئی اسٹیک ہولڈر پوچھے گا، "کیا میں انوائس نمبر تلاش کر سکتا ہوں؟" آپ کی دو گھنٹے کی انٹیگریشن ایک کسٹم بلڈ (custom build) میں بدل جائے گی۔ اسے تب منتخب کریں جب آپ کی PDFs مختصر ہوں، آپ کے صارفین اندرونی ہوں، اور انٹراکشن ماڈل صرف ریڈ-اونلی اسکرولنگ ہو۔
@tato30/vue-pdf: کنٹرول والا راستہ
یہ لائبریری ایک مونو لیتھک (monolithic) کمپوننٹ سے تبدیل ہو کر ایک کومپوز ایبل (composable) بن جاتی ہے۔ یہ usePDF فراہم کرتی ہے، جسے آپ اپنے setup بلاک کے اندر کال کرتے ہیں۔ پورے اسکرول ہونے والے ڈاکومنٹ کو رینڈر کرنے کے بجائے، آپ ری ایکٹیو ریفس (reactive refs) کے ذریعے ایک وقت میں ایک صفحہ مینیج کرتے ہیں۔ یہ اضافی کام لگتا ہے، لیکن جب انٹرفیس میں درستگی (precision) کی ضرورت ہو تو یہ بہت سکون دہ ہوتا ہے۔
ایک انشورنس کلیم ریویو ٹول کا تصور کریں جہاں ایڈجسٹرز دستاویز کا ایک صفحہ چیک کرتے ہیں، 'Next' پر کلک کرتے ہیں، اور سسٹم ہر دیکھنے کے واقعے (viewing event) کو لاگ کرتا ہے۔ یہاں مسلسل اسکرول ہونے والا ویور ایک غلط مثال ہوگی۔ آپ کو ایک کنٹرولڈ پیجینٹر (paginator) چاہیے، شاید پیج لیول کمنٹنگ یا موجودہ پیج انڈیکس سے براہ راست منسلک منظوری کے بٹنوں کے ساتھ۔ چونکہ usePDF آپ کو پیج کاؤنٹ اور موجودہ صفحہ ری ایکٹیو ڈیٹا کے طور پر فراہم کرتا ہے، اس لیے اسے ایک کسٹم نیویگیشن بار یا پروگریس انڈیکیٹر کے ساتھ جوڑنا فطری محسوس ہوتا ہے۔ آپ اب بھی کینوس کے گرد ڈیزائن (chrome) بناتے ہیں، لیکن آپ کم ترین سطح کی رینڈرنگ بوائلر پلیٹ سے بچ جاتے ہیں۔ یہ ان ایپس کے لیے موزوں ہے جہاں صارفین مکمل نسخہ پڑھنے کے بجائے ایک ایک کر کے صفحات دیکھتے ہیں۔
Vue PDF Viewer: فل سروس راستہ
ایک ایسا مقام آتا ہے جہاں ویو فیچرز کی دوبارہ تعمیر آپ کے اصل پروڈکٹ سے توجہ ہٹانے کا باعث بن جاتی ہے۔ Vue PDF Viewer ایک تجارتی کمپوننٹ ہے جو مکمل ٹول بار، ٹیکسٹ سرچ، اینوٹیشنز، موبائل ریسپانسیونس، اور ورچوئل اسکرولنگ کے ساتھ آتا ہے، جسے پہلے ہی مختلف پیچیدہ حالات (edge cases) میں آزمایا جا چکا ہے۔ اب آپ کا کام ایجاد کرنا نہیں بلکہ صرف کنفیگریشن کرنا رہ جاتا ہے۔ آپ اپنے ڈیزائن سسٹم سے مطابقت رکھنے کے لیے تھیم کو ایڈجسٹ کرتے ہیں، اپنی ضرورت کے مطابق فیچرز کو آن یا آف کرتے ہیں، اور پھر اس کام کی طرف بڑھ جاتے ہیں جو اصل میں آپ کی ایپ کو دوسروں سے ممتاز کرتا ہے۔
شروع میں لائسنس کی فیس ادا کرنا ایک حقیقت ہے، لیکن سرچ انڈیکسنگ اور اینوٹیشن لیئرز کو دوبارہ بنانے میں صرف ہونے والے دو ہفتوں کے انجینئرنگ وقت کی قیمت بھی اتنی ہی حقیقت ہے۔ یہ اس وقت کا بہترین ٹول ہے جب آپ ایک سخت ڈیڈ لائن کے تحت پروڈکشن ایپ لانچ کر رہے ہوں اور آپ کے صارفین ایک ایسا تجربہ چاہتے ہوں جو ڈیسک ٹاپ پی ڈی ایف سافٹ ویئر کے برابر ہو۔
انسٹالیشن کی اصل قیمت کیا ہے
سب سے بڑی غلطی npm install کمانڈ کو کل قیمت سمجھنا ہے۔ اصل قیمت وہ ہے جو انسٹالیشن مکمل ہونے کے بعد آپ بناتے ہیں۔ ایک ہلکی پھلکی لائبریری پہلے دن سستی ہوتی ہے لیکن بیسویں دن مہنگی پڑ جاتی ہے جب آپ کو احساس ہوتا ہے کہ آپ کو سرچ بار کی ضرورت ہے۔ DIY (خود سے بنانے کا) راستہ پہلے دن مفت ہوتا ہے لیکن ساٹھویں دن مہنگا پڑ جاتا ہے جب آپ اب بھی موبائل ٹچ ٹارگٹس اور پرنٹ اسٹائل شیٹس کو ٹھیک کرنے میں مصروف ہوتے ہیں۔ تجارتی راستہ شروع میں پیسے مانگتا ہے، لیکن یہ آپ کے انجینئرنگ کے کئی ہفتوں کا وقت بچا سکتا ہے جسے آپ اپنے اصل بزنس لاجک پر خرچ کر سکتے ہیں۔
کسی لائبریری کا انتخاب صرف اس لیے نہ کریں کہ اس کا README مختصر اور دوستانہ ہے۔ اپنے پروجیکٹ کی ضروریات کی بنیاد پر انتخاب کریں۔ تھمب نیلز کا سائیڈ بار، ٹیکسٹ سرچ، اور کلائنٹ سائیڈ اینوٹیشنز آپ کو ایک مکمل سروس فراہم کرنے والے حل کی طرف اشارہ کرتے ہیں۔ ایک انٹرنل ڈیش بورڈ کے اندر فوری رسید کا پری ویو آپ کو ہلکے پھلکے ایمبیڈ کی طرف اشارہ کرتا ہے۔
اصل حاصلِ کلام
کسی بھی Vue PDF لائبریری کا انتخاب کرنے سے پہلے، یہ لکھ لیں کہ آپ کے صارفین کو اصل میں کیا کرنے کی ضرورت ہے۔ اگر انہیں صرف مختصر دستاویزات کو اسکرول کرنے کی ضرورت ہے، تو vue-pdf-embed آپ کے لیے کافی ہے۔ اگر وہ ایک کنٹرول شدہ ورک فلو میں صفحات کے ذریعے آگے بڑھتے ہیں، تو @tato30/vue-pdf کا استعمال کریں۔ اگر وہ کسی بزنس کے لیے اہم ایپ کے اندر اینوٹیشن، سرچ اور پرنٹ کرتے ہیں، تو کمرشل ویو خرید لیں۔ اور اگر آپ کی ضروریات واقعی منفرد ہیں لیکن آپ کے پاس وقت کی کمی نہیں ہے، تو کچھ ہفتے نکالیں اور براہ راست PDF.js پر کام کریں۔ ایک پی ڈی ایف ویو صرف ایک فائل نہیں ہوتی۔ یہ ایک مکمل دستاویز کا انٹرفیس ہے، اور آپ کے انتخاب کا فیصلہ یہ کرے گا کہ آپ اس مہینے پروڈکٹ لانچ کریں گے یا اگلی سہ ماہی میں۔