ഡെവലപ്പർമാർ പലപ്പോഴും PDF വ്യൂവേറുകളെ നിസ്സാരമായി കാണാറുണ്ട്. ഇതൊരു ലളിതമായ ഫയൽ കൈകാര്യം ചെയ്യൽ പ്രശ്നമായിട്ടാണ് തോന്നുക. നിങ്ങൾ ബൈറ്റുകൾ ഫെച്ച് ചെയ്യുന്നു, ഒരു കോംപോണന്റിനെ URL-ലേക്ക് തിരിച്ചുവിടുന്നു, അത്രതന്നെ. Vue.js മിക്ക UI ജോലികളെയും ഇത്ര ലളിതമാക്കുന്നുണ്ടെങ്കിലും, ഒരു പ്രൊഡക്ഷൻ-റെഡി PDF വ്യൂവർ എന്നത് ഒരു സപ്രിന്റ് മുഴുവൻ എടുക്കാൻ സാധ്യതയുള്ള ഒന്നാണ്. രണ്ട് ആഴ്ചയ്ക്കുള്ളിൽ ഞാൻ ഒരേ വ്യൂവർ നാല് വ്യത്യസ്ത രീതികളിൽ നിർമ്മിച്ചു. ഓരോ ശ്രമവും ഒരേ കാര്യം തന്നെ എനിക്ക് മനസ്സിലാക്കിത്തന്നു: നിങ്ങൾ തിങ്കളാഴ്ച തിരഞ്ഞെടുക്കുന്ന ലൈബ്രറിയാണ് രണ്ട് മാസത്തിന് ശേഷം നിങ്ങൾ ഏത് ബഗുകൾ പരിഹരിക്കേണ്ടി വരുമെന്ന് തീരുമാനിക്കുന്നത്.
The Outdated Tutorial Trap
മിക്ക ഗൈഡുകളും ഇപ്പോഴും ശുപാർശ ചെയ്യുന്നത് Vue 2 കാലഘട്ടത്തിൽ അവസാനമായി അപ്ഡേറ്റ് ചെയ്യപ്പെട്ട ലൈബ്രറികളാണ്. ഒരു ഡെവലപ്പർ README ഒന്ന് കണ്ണോടിച്ചു നോക്കുന്നു, ഇൻസ്റ്റാൾ കമാൻഡ് റൺ ചെയ്യുന്നു, കഠിനമായ ഭാഗം കഴിഞ്ഞു എന്ന് കരുതുന്നു. എന്നാൽ യഥാർത്ഥത്തിൽ, കഠിനമായ ഭാഗം തുടങ്ങുന്നതേയുള്ളൂ. നിങ്ങൾക്ക് സെർച്ച് ഫീച്ചർ ആവശ്യമായി വരും. ബ്രൗസർ ടാബ് ക്രാഷ് ചെയ്യാതെ തന്നെ 400 പേജുള്ള ഒരു പോളിസി ഡോക്യുമെന്റ് കൈകാര്യം ചെയ്യേണ്ടി വരും. മൊബൈൽ ഉപയോക്താക്കൾ 'pinch-to-zoom' ശരിയായി പ്രവർത്തിക്കുന്നില്ല എന്ന് പരാതിപ്പെടും. അഞ്ച് പേജുള്ള ഒരു അക്കാദമിക് പേപ്പറിന്റെ ആദ്യ പേജ് മാത്രം കാണിക്കുന്ന ഡെമോ ആയതുകൊണ്ട്, README-യിൽ ഇത്തരം മുന്നറിയിപ്പുകൾ ഉണ്ടാകില്ല.
The Four Approaches
Vue-ന് വേണ്ടി ഒരു മികച്ച PDF ലൈബ്രറിയും ഇല്ല. പകരം, നിങ്ങളുടെ ഉപയോക്താക്കൾ എന്താണ് ചെയ്യാൻ ശ്രമിക്കുന്നത് എന്നതിനനുസരിച്ചുള്ള അനുയോജ്യമായ ലൈബ്രറി മാത്രമേയുള്ളൂ.
PDF.js: The DIY Path
മിക്ക വെബ് അധിഷ്ഠിത വ്യൂവേറുകളുടെയും പിന്നിലെ എൻജിൻ Mozilla-യുടെ PDF.js ആണ്. ഇത് ഒരു Vue 3 ആപ്പിൽ ഉപയോഗിക്കുക എന്നാൽ ഒരു കോംപോണന്റ് ഇൻസ്റ്റാൾ ചെയ്യുക എന്നല്ല; മറിച്ച് ഒരു പ്രോജക്റ്റ് ഏറ്റെടുക്കുക എന്നാണ് അർത്ഥം. നിങ്ങൾ getDocument ഉപയോഗിച്ച് ഡോക്യുമെന്റ് ഫെച്ച് ചെയ്യുന്നു, ഓരോ പേജും ഒരു <canvas> എലമെന്റിലേക്ക് റെൻഡർ ചെയ്യുന്നു, ആ കാൻവാസുകളെ നിങ്ങളുടെ ടെംപ്ലേറ്റുമായി ബന്ധിപ്പിക്കുന്നു. ആദ്യ ദിവസം നിങ്ങൾ വളരെ കാര്യക്ഷമമായി ജോലി ചെയ്യുന്നു എന്ന് തോന്നും. എന്നാൽ മൂന്നാം ദിവസം എത്തുമ്പോഴേക്കും Vite bundling-ഉം CORS headers-ഉം ശരിയായി പ്രവർത്തിപ്പിക്കാൻ നിങ്ങൾ worker script കോൺഫിഗർ ചെയ്തുകൊണ്ടിരിക്കും.
പത്ത് പേജുകൾക്ക് ബ്രൗസറിലെ സാധാരണ സ്ക്രോളിംഗ് നന്നായി പ്രവർത്തിക്കും. എന്നാൽ ആയിരം പേജുകൾ വരുമ്പോൾ അത് പതറിപ്പോകും, അതിനാൽ നിങ്ങൾ virtual scrolling നിർമ്മിക്കേണ്ടി വരും. പിന്നീട് ടെക്സ്റ്റ് സെലക്ട് ചെയ്യാൻ കഴിയില്ലെന്ന് നിങ്ങൾ ശ്രദ്ധിക്കും, അതിനാൽ ഓരോ കാൻവാസറിന് മുകളിലും സുതാര്യമായ (transparent) ടെക്സ്റ്റ് divs വെക്കേണ്ടി വരും. പ്രിന്റിംഗ് മങ്ങിയതായി തോന്നിയാൽ, നിങ്ങൾ DPI സെറ്റിംഗുകളും മീഡിയ ക്വറികളും പരിശോധിക്കേണ്ടി വരും. മൊബൈലിലെ pinch-to-zoom ബ്രൗസറിലെ നെറ്റീവ് ജെസ്റ്റർ ഹാൻഡ്ലിംഗുമായി ഏറ്റുമുട്ടുന്നു. ക്രോസ്-ഡോക്യുമെന്റ് സെർച്ച് എന്നാൽ എല്ലാ പേജുകളിൽ നിന്നും ടെക്സ്റ്റ് അസിൻക്രണസ് ആയി എക്സ്ട്രാക്ട് ചെയ്ത് ഇൻഡക്സ് ചെയ്യുക, തുടർന്ന് മെയിൻ ത്രെഡ് ബ്ലോക്ക് ചെയ്യാതെ റിസൾട്ടുകൾ കാണിക്കുന്ന ഒരു UI നിർമ്മിക്കുക എന്നതാണ്. Cursor പോലുള്ള ഒരു AI കോഡിംഗ് അസിസ്റ്റന്റ് ഉപയോഗിച്ച് ബോയ്ലർപ്ലേറ്റ് കോഡ് ഉണ്ടാക്കിയാലും, ആർക്കിടെക്ചർ നിങ്ങളുടെ ഉത്തരവാദിത്തമായിരിക്കും. പ്രയാസകരമായ കാര്യങ്ങൾ ഇല്ലാതാകുന്നില്ല; അവ നിങ്ങളുടെ കോഡ്ബേസിലേക്ക് മാറുന്നു. നിങ്ങളുടെ ആവശ്യങ്ങൾ വളരെ പ്രത്യേകതയുള്ളതാണെങ്കിലോ, അല്ലെങ്കിൽ റെഡിമെയ്ഡ് ലൈബ്രറികൾ ഒഴിവാക്കാൻ നിങ്ങൾക്ക് വ്യക്തമായ കാരണവും കുറച്ച് ആഴ്ചകളുടെ സമയവും ഉണ്ടെങ്കിലോ മാത്രമേ ഈ വഴി തിരഞ്ഞെടുക്കാവൂ.
vue-pdf-embed: The Lightweight Path
ചിലപ്പോൾ ഫയൽ കാണിക്കുക എന്നത് മാത്രമായിരിക്കും നിങ്ങളുടെ ആവശ്യം. vue-pdf-embed എന്നത് ഒരു സോഴ്സ് സ്വീകരിച്ച് പേജുകളെ ഒരു വെർട്ടിക്കൽ സ്റ്റാക്കിൽ റെൻഡർ ചെയ്യുന്ന ഒരു Vue 3 കോംപോണന്റാണ്. ഇൻസ്റ്റാളേഷനും ഇന്റഗ്രേഷനും മിനിറ്റുകൾക്കുള്ളിൽ തീരും. ഇൻവോയിസുകളോ കംപ്ലയൻസ് റിപ്പോർട്ടുകളോ കാണിക്കുന്ന ഒരു ഇന്റേണൽ അഡ്മിൻ പാനലിന് ഇത് ധാരാളമാണ്. ഈ കോംപോണന്റ് കാൻവാസ് റെൻഡറിംഗ് കൈകാര്യം ചെയ്യുന്നു, ഉപയോക്താക്കൾക്ക് സ്ക്രോൾ ചെയ്യാനും സാധിക്കും.
ഇതിന്റെ പോരായ്മ മറ്റുള്ളവയാണ്. ഇതിൽ ടൂൾബാർ, ഡോക്യുമെന്റ് സെർച്ച്, തംബ്നെയിൽ സൈഡ്ബാർ, സ്ക്രോൾ കണ്ടെയ്നർ വഴി പേജുകൾ നോക്കുന്നതല്ലാതെ മറ്റ് പേജ് നാവിഗേഷൻ എന്നിവ ലഭ്യമല്ല. "എനിക്ക് ഇൻവോയിസ് നമ്പർ സെർച്ച് ചെയ്യാമോ?" എന്ന് ഒരു സ്റ്റേക്ക്ഹോൾഡർ ചോദിക്കുന്ന നിമിഷം, നിങ്ങളുടെ രണ്ട് മണിക്കൂർ നീണ്ട ഇന്റഗ്രേഷൻ ഒരു വലിയ കസ്റ്റം ബിൽഡായി മാറും. നിങ്ങളുടെ PDF-കൾ ചെറുതും, ഉപയോക്താക്കൾ ഇന്റേണൽ ആയതും, വെറുതെ വായിച്ചു നോക്കാൻ മാത്രമുള്ളതാണെങ്കിൽ മാത്രം ഇത് തിരഞ്ഞെടുക്കുക.
@tato30/vue-pdf: The Control Path
ഈ ലൈബ്രറി ഒരു മോണോലിത്തിക് കോംപോണന്റിന് പകരം ഒരു കോമ്പോസബിൾ (composable) ആയിട്ടാണ് പ്രവർത്തിക്കുന്നത്. ഇത് usePDF എന്ന ഫംഗ്ഷൻ നൽകുന്നു, ഇത് നിങ്ങളുടെ setup ബ്ലോക്കിനുള്ളിൽ ഉപയോഗിക്കാം. മുഴുവൻ ഡോക്യുമെന്റും സ്ക്രോൾ ചെയ്യുന്നതിന് പകരം, റിയാക്റ്റീവ് റഫുകൾ (reactive refs) ഉപയോഗിച്ച് ഓരോ പേജും പ്രത്യേകം കൈകാര്യം ചെയ്യാം. ഇത് കൂടുതൽ ജോലിയാണെന്ന് തോന്നാമെങ്കിലും, കൃത്യത ആവശ്യമായ ഇന്റർഫേസുകളിൽ ഇത് വലിയ ആശ്വാസമാണ്.
ഇൻഷുറൻസ് ക്ലെയിം റിവ്യൂ ചെയ്യുന്ന ഒരു ടൂൾ സങ്കൽപ്പിക്കുക; അവിടെ അഡ്ജസ്റ്റർമാർ ഓരോ പേജും പരിശോധിക്കുന്നു, 'Next' ക്ലിക്ക് ചെയ്യുന്നു, ഓരോ തവണ കാണുന്നതും സിസ്റ്റം രേഖപ്പെടുത്തുന്നു. ഇവിടെ ഒരു കണ്ടിന്യൂസ് സ്ക്രോളബിൾ വ്യൂവർ അനുയോജ്യമല്ല. പകരം, പേജ് ലെവൽ കമന്റുകളോ അപ്രൂവൽ ബട്ടണുകളോ ഉള്ള ഒരു കൺട്രോൾഡ് പേജിനേറ്റർ ആണ് നിങ്ങൾക്ക് വേണ്ടത്. usePDF പേജ് എണ്ണവും നിലവിലെ പേജും റിയാക്റ്റീവ് ഡാറ്റയായി നൽകുന്നതുകൊണ്ട്, ഇത് ഒരു കസ്റ്റം നാവിഗേഷൻ ബാറുമായോ പ്രോഗ്രസ് ഇൻഡിക്കേറ്ററുമായോ ബന്ധിപ്പിക്കുന്നത് വളരെ സ്വാഭാവികമാണ്. നിങ്ങൾ കാൻവാസിന് ചുറ്റുമുള്ള ഡിസൈൻ നിർമ്മിക്കേണ്ടി വരുമെങ്കിലും, ലോ-ലെവൽ റെൻഡറിംഗ് ജോലികളിൽ നിന്ന് നിങ്ങൾക്ക് രക്ഷപ്പെടാം. ഉപയോക്താക്കൾ ഒരു വലിയ രേഖ മുഴുവൻ സ്കാൻ ചെയ്യുന്നതിന് പകരം ഓരോ പേജായി നോക്കുന്ന ആപ്പുകൾക്ക് ഇത് അനുയോജ്യമാണ്.
Vue PDF Viewer: The Full-Service Path
വ്യൂവർ ഫീച്ചറുകൾ വീണ്ടും നിർമ്മിക്കുന്നത് നിങ്ങളുടെ യഥാർത്ഥ ഉൽപ്പന്നത്തിൽ നിന്നുള്ള ശ്രദ്ധ തിരിക്കുന്ന ഒരു ഘട്ടം വരും. Vue PDF Viewer എന്നത് ഫുൾ ടൂൾബാർ, ടെക്സ്റ്റ് സെർച്ച്, അനോട്ടേഷൻസ്, മൊബൈൽ റെസ്പോൺസിവ്നെസ്സ്, എഡ്ജ് കേസുകളിൽ പരീക്ഷിച്ചുറപ്പിച്ച വെർച്വൽ സ്ക്രോളിംഗ് എന്നിവയുമായി വരുന്ന ഒരു കമേഴ്സ്യൽ കമ്പോണന്റാണ്. പുതിയതായി നിർമ്മിക്കുന്നതിന് പകരം കോൺഫിഗറേഷൻ മാത്രമായി നിങ്ങളുടെ ജോലി മാറുന്നു. നിങ്ങളുടെ ഡിസൈൻ സിസ്റ്റത്തിന് അനുസൃതമായി തീം ക്രമീകരിക്കാനും, ആവശ്യമായ ഫീച്ചറുകൾ ഓൺ ചെയ്യാനും, തുടർന്ന് നിങ്ങളുടെ ആപ്പിനെ വ്യത്യസ്തമാക്കുന്ന പ്രധാനപ്പെട്ട ജോലികളിലേക്ക് ശ്രദ്ധ കേന്ദ്രീകരിക്കാനും നിങ്ങൾക്ക് സാധിക്കുന്നു.
ലൈസൻസ് ഫീസ് നൽകേണ്ടി വരുന്നത് ഒരു കാര്യമാണ്, എന്നാൽ സെർച്ച് ഇൻഡക്സിംഗും അനോട്ടേഷൻ ലെയറുകളും വീണ്ടും നിർമ്മിക്കാൻ ചെലവാകുന്ന രണ്ട് ആഴ്ചത്തെ എഞ്ചിനീയറിംഗ് സമയവും ഒരു വലിയ ചിലവാണ്. കൃത്യമായ സമയപരിധിക്കുള്ളിൽ ഒരു പ്രൊഡക്ഷൻ ആപ്പ് പുറത്തിറക്കേണ്ടി വരുമ്പോഴും, ഡെസ്ക്ടോപ്പ് PDF സോഫ്റ്റ്വെയറിന് സമാനമായ അനുഭവം ഉപയോക്താക്കൾ പ്രതീക്ഷിക്കുമ്പോഴും ഉപയോഗിക്കാൻ അനുയോജ്യമായ ടൂളാണിത്.
ഇൻസ്റ്റാളേഷൻ യഥാർത്ഥത്തിൽ എത്ര ചിലവാക്കുന്നു
npm install കമാൻഡ് ആണ് ആകെ ചിലവ് എന്ന് കരുതുന്നതാണ് ഏറ്റവും വലിയ തെറ്റ്. ഇൻസ്റ്റാളേഷൻ കഴിഞ്ഞ ശേഷം നിങ്ങൾ നിർമ്മിക്കുന്ന കാര്യങ്ങളാണ് യഥാർത്ഥ ചിലവ്. ഒരു ലൈറ്റ് വെയ്റ്റ് ലൈബ്രറി ആദ്യ ദിവസം ചിലവ് കുറഞ്ഞതാണെങ്കിലും, ഇരുപതാം ദിവസം നിങ്ങൾക്ക് ഒരു സെർച്ച് ബാർ ആവശ്യമാണെന്ന് മനസ്സിലാക്കുമ്പോൾ അത് വലിയ ചിലവായി മാറും. സ്വയം നിർമ്മിക്കുന്ന രീതി (DIY) ആദ്യ ദിവസം സൗജന്യമാണെങ്കിലും, മൊബൈൽ ടച്ച് ടാർഗറ്റുകളും പ്രിന്റ് സ്റ്റൈൽഷീറ്റുകളും ശരിയാക്കാൻ ശ്രമിക്കുന്ന അറുപതാം ദിവസം അത് വലിയ ചിലവായി മാറും. കമേഴ്സ്യൽ പാതയ്ക്ക് തുടക്കത്തിൽ പണം നൽകേണ്ടി വരുന്നുണ്ടെങ്കിലും, നിങ്ങളുടെ ബിസിനസ് ലോജിക്കിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ സഹായിക്കുന്നതിലൂടെ ആഴ്ചകളോളം നീളുന്ന എഞ്ചിനീയറിംഗ് സമയം ലാഭിക്കാൻ ഇതിലൂടെ സാധിക്കും.
README ചെറുതും ലളിതവുമാണെന്ന് കരുതി ഒരു ലൈബ്രറി തിരഞ്ഞെടുക്കരുത്. നിങ്ങളുടെ പ്രോജക്റ്റ് ആവശ്യകതകൾ അനുസരിച്ച് തിരഞ്ഞെടുക്കുക. സൈഡ്ബാർ തംബ്നെയിലുകൾ, ടെക്സ്റ്റ് സെർച്ച്, ക്ലയന്റ് സൈഡ് അനോട്ടേഷൻസ് എന്നിവ ആവശ്യമാണെങ്കിൽ ഒരു ഫുൾ-സർവീസ് സൊല്യൂഷനിലേക്ക് ശ്രദ്ധ തിരിക്കുക. ഒരു ഇന്റേണൽ ഡാഷ്ബോർഡിനുള്ളിൽ വേഗത്തിലുള്ള രസീത് പ്രിവ്യൂ മാത്രമാണ് വേണ്ടതെങ്കിൽ ഒരു ലൈറ്റ് വെയ്റ്റ് എംബെഡ് തിരഞ്ഞെടുക്കുക.
യഥാർത്ഥ പാഠം
ഏതെങ്കിലും Vue PDF ലൈബ്രറി തിരഞ്ഞെടുക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് കൃത്യമായി എന്താണ് ചെയ്യേണ്ടതെന്ന് എഴുതി വെക്കുക. അവർക്ക് ചെറിയ ഡോക്യുമെന്റുകൾ സ്ക്രോൾ ചെയ്യുക മാത്രമാണ് വേണ്ടതെങ്കിൽ, vue-pdf-embed മതിയാകും. നിയന്ത്രിതമായ ഒരു വർക്ക്ഫ്ലോയിലൂടെ പേജുകൾ പരിശോധിക്കാനാണ് അവർ ഉദ്ദേശിക്കുന്നതെങ്കിൽ, @tato30/vue-pdf ഉപയോഗിക്കുക. ഒരു ബിസിനസ്സ് ആവശ്യത്തിനായുള്ള ആപ്പിൽ അനോട്ടേറ്റ് ചെയ്യാനും സെർച്ച് ചെയ്യാനും പ്രിന്റ് ചെയ്യാനും ആവശ്യമുണ്ടെങ്കിൽ, ഒരു കമേഴ്സ്യൽ വ്യൂവർ വാങ്ങുക. നിങ്ങളുടെ ആവശ്യങ്ങൾ തികച്ചും വ്യത്യസ്തമാണെങ്കിലും സമയപരിധിയിൽ ഇളവുണ്ടെങ്കിൽ, കുറച്ച് ആഴ്ചകൾ മാറ്റിവെച്ച് നേരിട്ട് PDF.js ഉപയോഗിച്ച് നിർമ്മിക്കുക. ഒരു PDF വ്യൂവർ എന്നത് വെറുമൊരു ഫയൽ മാത്രമല്ല. അത് ഒരു സമ്പൂർണ്ണ ഡോക്യുമെന്റ് ഇന്റർഫേസ് ആണ്, നിങ്ങളുടെ തിരഞ്ഞെടുപ്പാണ് ഈ മാസം തന്നെ ഉൽപ്പന്നം പുറത്തിറക്കണോ അതോ അടുത്ത ക്വാർട്ടറിൽ പുറത്തിറക്കണോ എന്ന് തീരുമാനിക്കുന്നത്.