டெவலப்பர்கள் PDF வியூயர்களை (viewers) தொடர்ந்து குறைத்து மதிப்பிடுகிறார்கள். இது ஒரு எளிய கோப்புப் பிரச்சனை போலத் தோன்றலாம். நீங்கள் பைட்டுகளைப் (bytes) பெற்று, ஒரு காம்போனென்ட்டை (component) URL-ஐ நோக்கித் திருப்பினால் வேலை முடிந்தது என்று நினைப்பீர்கள். Vue.js பெரும்பாலான UI வேலைகளை எளிதாக உணரச் செய்கிறது, ஆனால் ஒரு தயாரிப்புத் தரத்திலான (production-ready) PDF வியூயர் என்பது முழுமையான ஸ்பிரிண்ட்களையே (sprints) ஆக்கிரமிக்கக்கூடிய ஒரு அம்சமாகும். நான் இரண்டு வாரங்களில் நான்கு வெவ்வேறு வழிகளில் ஒரே வியூயரை உருவாக்கினேன். ஒவ்வொரு முயற்சியும் ஒரே விஷயத்தை வலியுறுத்தியது: நீங்கள் திங்கட்கிழமை தேர்ந்தெடுக்கும் லைப்ரரி (library), இரண்டு மாதங்களுக்குப் பிறகு நீங்கள் எந்தப் பிழைகளை (bugs) சரிசெய்யப் போகிறீர்கள் என்பதைத் தீர்மானிக்கிறது.
காலாவதியான டுடோரியல் பொறி
பெரும்பாலான வழிகாட்டிகள் இன்னும் Vue 2 இயல்பாக இருந்தபோது கடைசியாகப் புதுப்பிக்கப்பட்ட லைப்ரரிகளைப் பரிந்துரைக்கின்றன. ஒரு டெவலப்பர் README-ஐத் திருப்புப் பார்த்துவிட்டு, இன்ஸ்டால் (install) கட்டளையை இயக்கிவிட்டு, கடினமான பகுதி முடிந்துவிட்டது என்று நினைப்பார். உண்மையில், கடினமான பகுதி அப்போதுதான் தொடங்குகிறது. உங்களுக்குத் தேடல் (search) வசதி தேவைப்படும். பிரவுசர் டேப் (browser tab) முடங்காமல் இருக்க 400 பக்கங்களைக் கொண்ட ஒரு கொள்கை ஆவணத்தைக் கையாள வேண்டியிருக்கும். மொபைலில் பயன்படுத்துபவர், 'pinch-to-zoom' ஏன் சரியாக வேலை செய்யவில்லை என்று கேட்பார். README பெரும்பாலும் இதைப் பற்றி எச்சரிக்காது, ஏனெனில் அதன் டெமோ ஒரு ஐந்து பக்க ஆய்வுக் கட்டுரையின் முதல் பக்கத்தை மட்டுமே காண்பிக்கும்.
நான்கு அணுகுமுறைகள்
Vue-க்கு என்று ஒரே ஒரு சிறந்த PDF லைப்ரரி என்று எதுவும் இல்லை. உங்கள் பயனர்கள் உண்மையில் என்ன செய்ய முயற்சிக்கிறார்கள் என்பதற்குப் பொருத்தமானதே சிறந்தது.
PDF.js: நீங்களே உருவாக்கும் வழி
மொஸில்லாவின் (Mozilla) PDF.js என்பது இணைய அடிப்படையிலான கிட்டத்தட்ட அனைத்து வியூயர்களுக்கும் அடிப்படையான இன்ஜின் ஆகும். அதை ஒரு Vue 3 ஆப்பில் பயன்படுத்துவது என்பது ஒரு காம்போனென்ட்டை இன்ஸ்டால் செய்வது மட்டுமல்ல; அது ஒரு முழுத் திட்டத்தையும் (project) ஏற்றுக்கொள்வதாகும். நீங்கள் getDocument மூலம் ஆவணத்தைப் பெற்று, ஒவ்வொரு பக்கத்தையும் ஒரு <canvas> எலிமெண்டிற்கு (element) ரெண்டர் (render) செய்து, அந்த கேன்வாஸ்களை உங்கள் டெம்ப்ளேட்டுடன் (template) இணைக்க வேண்டும். முதல் நாளில், நீங்கள் சுறுசுறுப்பாக உணர்வீர்கள். மூன்றாம் நாள் வரும்போது, Vite பண்ட்லிங் (bundling) மற்றும் CORS ஹெடர்களுடன் (headers) சரியாக வேலை செய்யer worker ஸ்கிரிப்டை நீங்கள் கான்ஃபிகர் (configure) செய்து கொண்டிருப்பீர்கள்.
பத்து பக்கங்களுக்கு நேட்டிவ் பிரவுசர் ஸ்க்ரோல் (native browser scroll) நன்றாக வேலை செய்யும். ஆனால் ஆயிரம் பக்கங்களுக்கு அது திணறும், எனவே நீங்கள் விர்ச்சுவல் ஸ்க்ரோலிங் (virtual scrolling) உருவாக்க வேண்டும். பிறகு, உரையைத் தேர்ந்தெடுக்க (text selection) முடியாது என்பதைக் கவனிப்பீர்கள், எனவே ஒவ்வொரு கேன்வாஸிற்கும் மேலே வெளிப்படையான டெக்ஸ்ட் டிவ்களை (transparent text divs) நீங்கள் அடுக்கி வைப்பீர்கள். பிரிண்ட் எடுக்கும்போது மங்கலாகத் தெரியும், எனவே நீங்கள் DPI செட்டிங்ஸ் மற்றும் மீடியா குவெரிகளைத் (media queries) தேடி அலைவீர்கள். மொபைல் பிஞ்ச்-டு-ஸூம் (pinch-to-zoom), பிரவுசரின் நேட்டிவ் ஜெஸ்டர் ஹேண்ட்லிங்குடன் (native gesture handling) போராடும். குறுக்கு-ஆவணத் தேடல் (Cross-document search) என்பது ஒவ்வொரு பக்கத்திலிருந்தும் உரையைத் பிரித்தெடுத்து, அன்சிங்க்ரோனஸாக (asynchronously) இன்டெக்ஸ் செய்து, மெயின் திரெட்டை (main thread) முடக்காமல் முடிவுகளைக் காட்டும் ஒரு UI-ஐ உருவாக்குவதாகும். Cursor போன்ற ஒரு AI கோடிங் அசிஸ்டெண்ட் (coding assistant) மூலம் போயலர்ப்ளேட் (boilerplate) குறியீடுகளை உருவாக்கினாலும், அதன் கட்டமைப்பை (architecture) நீங்களேதான் கையாள வேண்டும். கடினமான பகுதிகள் மறைந்துவிடாது; அவை உங்கள் கோட்பாட்டில் (codebase) இடம்பெறும். உங்கள் தேவைகள் மிகவும் குறிப்பிட்டதாக இருக்கும்போது அல்லது உங்களிடம் பல வாரங்கள் கால அவகாசம் இருந்து, ஏற்கனவே உள்ள தீர்வுகளைத் தவிர்க்க வலுவான காரணம் இருக்கும்போது மட்டுமே இந்த வழி அர்த்தமுள்ளதாக இருக்கும்.
vue-pdf-embed: இலகுவான வழி
சில நேரங்களில் உங்களுக்குத் தேவை கோப்பைக் காண்பிப்பது மட்டுமே. vue-pdf-embed என்பது ஒரு மூலத்தை (source) ஏற்றுக்கொண்டு பக்கங்களை செங்குத்தாக அடுக்கித் தரும் ஒரு Vue 3 காம்போனென்ட் ஆகும். இதை இன்ஸ்டால் செய்து ஒருங்கிணைக்க சில நிமிடங்கள் மட்டுமே ஆகும். உருவாக்கப்பட்ட இன்வாய்ஸ்கள் (invoices) அல்லது இணக்க அறிக்கைகளைக் (compliance reports) காட்டும் ஒரு உள் நிர்வாகப் பேனலுக்கு (internal admin panel), இது பெரும்பாலும் போதுமானதாக இருக்கும். இந்த காம்போனென்ட் கேன்வாஸ் ரெண்டரிங்கை கவனித்துக் கொள்ளும், பயனர்கள் ஸ்க்ரோல் செய்யலாம்.
ஆனால் இதர வசதிகள் எதுவும் இதில் இருக்காது. இதில் டூல் பார் (toolbar), ஆவணத் தேடல், தம்ப்நெயில் சைட்பார் (thumbnail sidebar) மற்றும் ஸ்க்ரோல் கண்டெய்னரில் நகர்வதைத் தவிர பக்கங்களை மாற்றுவதற்கான வசதிகள் எதுவும் இல்லை. ஒரு ஸ்டேக்ஹோல்டர் (stakeholder), "நான் இன்வாய்ஸ் எண்ணைத் தேட முடியுமா?" என்று கேட்ட அடுத்த கணமே, உங்கள் இரண்டு மணிநேர ஒருங்கிணைப்பு ஒரு பெரிய தனிப்பயன் உருவாக்கமாக (custom build) மாறிவிடும். உங்கள் PDF-கள் சிறியதாகவும், உங்கள் பயனர்கள் நிறுவனத்திற்குள்ளானவர்களாகவும், மற்றும் வெறும் வாசிப்பதற்கான ஸ்க்ரோலிங் மட்டுமே தேவைப்படும்போது இதைத் தேர்ந்தெடுக்கவும்.
@tato30/vue-pdf: கட்டுப்பாட்டு வழி
இந்த லைப்ரரி ஒரு மோனோலிதிக் காம்போனென்ட்டிலிருந்து (monolithic component) ஒரு காம்போசபிளாக (composable) மாறுகிறது. இது usePDF-ஐ வெளிப்படுத்துகிறது, அதை உங்கள் setup பிளாக்கிற்குள் நீங்கள் அழைக்கலாம். முழுமையான ஸ்க்ரோலபிள் ஆவணத்தையும் ரெண்டர் செய்வதற்குப் பதிலாக, நீங்கள் ஒவ்வொரு பக்கத்தையும் reactive refs மூலம் நிர்வகிக்கிறீர்கள். இது கூடுதல் வேலை போலத் தோன்றலாம், ஆனால் இடைமுகம் துல்லியத்தன்மையைக் கோரும்போது இது உங்களுக்குச் சுதந்திரத்தைத் தரும்.
இன்சூரன்ஸ் க்ளைம் (insurance claim) மதிப்பாய்வு கருவியை கற்பனை செய்து பாருங்கள், அங்கு சரிபார்ப்பவர்கள் ஒரு ஆவணப் பக்கத்தைப் பார்த்துவிட்டு, 'Next' என்பதைக் கிளிக் செய்வார்கள், மேலும் சிஸ்டம் ஒவ்வொரு முறை பார்க்கும் நிகழ்வையும் பதிவு செய்யும். அங்கு தொடர்ச்சியான ஸ்க்ரோலபிள் வியூயர் தவறான தேர்வாக இருக்கும். உங்களுக்கு ஒரு கட்டுப்படுத்தப்பட்ட பேஜினேட்டர் (paginator) தேவைப்படும், ஒருவேளை பக்க அளவிலான கமெண்ட்கள் அல்லது தற்போதைய பக்க இன்டெக்ஸுடன் நேரடியாக இணைக்கப்பட்ட ஒப்புதல் பட்டன்கள் இருக்கலாம். usePDF உங்களுக்குப் பக்கங்களின் எண்ணிக்கை மற்றும் தற்போதைய பக்கத்தை reactive data-வாக வழங்குவதால், அதை ஒரு தனிப்பயன் நேவிகேஷன் பார் (navigation bar) அல்லது புரோகிரஸ் இண்டிகேட்டருடன் (progress indicator) இணைப்பது இயல்பாக இருக்கும். நீங்கள் கேன்வாஸைச் சுற்றித் தேவையான கூறுகளை (chrome) உருவாக்க வேண்டியிருக்கும், ஆனால் மிகக் குறைந்த அளவிலான ரெண்டரிங் போயலர்ப்ளேட் (rendering boilerplate) வேலைகளில் இருந்து நீங்கள் தப்பித்துவிடலாம். பயனர்கள் முழு ஆவணத்தையும் ஸ்கேன் செய்வதற்குப் பதிலாக, பக்கங்களை ஒவ்வொன்றாகப் பார்க்கும் செயலிகளுக்கு இது பொருத்தமானது.
Vue PDF Viewer: முழுச் சேவை வழி
வியூவர் அம்சங்களை மீண்டும் உருவாக்குவது உங்கள் உண்மையான தயாரிப்பிலிருந்து கவனத்தை திசைதிருப்பும் ஒரு கட்டம் வரும். Vue PDF Viewer என்பது ஒரு வணிக ரீதியான கூறு (commercial component) ஆகும், இது முழுமையான டூல் பார் (toolbar), உரைத் தேடல் (text search), குறிப்புகள் (annotations), மொபைல் ரெஸ்பான்சிவ்னஸ் (mobile responsiveness) மற்றும் பல்வேறு சூழல்களில் ஏற்கனவே சோதிக்கப்பட்ட விர்ச்சுவல் ஸ்க்ரோலிங் (virtual scrolling) ஆகியவற்றுடன் வருகிறது. உங்கள் வேலை புதியவற்றைக் கண்டுபிடிப்பதற்குப் பதிலாக, அவற்றை அமைப்பதாக (configuration) மாறும். உங்கள் டிசைன் சிஸ்டத்திற்கு (design system) ஏற்ப தீமை (theme) மாற்றியமைத்து, உங்களுக்குத் தேவையான அம்சங்களைச் செயல்படுத்திவிட்டு, உங்கள் செயலியை மற்றவற்றுடன் வேறுபடுத்திக் காட்டும் முக்கியமான வேலைகளில் கவனம் செலுத்தலாம்.
ஆரம்பக்கட்ட உரிமக் கட்டணம் (license fee) என்பது உண்மைதான், ஆனால் தேடல் குறியீட்டு முறை (search indexing) மற்றும் குறிப்பு அடுக்குகளை (annotation layers) மீண்டும் உருவாக்குவதற்காகச் செலவிடப்படும் இரண்டு வார கால பொறியியல் நேரத்தின் மதிப்பும் உண்மையானதுதான். நீங்கள் ஒரு குறிப்பிட்ட காலக்கெடுவிற்குள் ஒரு தயாரிப்பு செயலியை (production app) வெளியிடும்போது மற்றும் உங்கள் பயனர்கள் டெஸ்க்டாப் PDF மென்பொருளுக்கு இணையான அனுபவத்தை எதிர்பார்க்கும்போது, இதுவே சரியான கருவியாகும்.
நிறுவுவதற்கு உண்மையில் எவ்வளவு செலவாகும்
npm install கட்டளையை மொத்த விலையாகக் கருதுவதே மிகப்பெரிய தவறு. நிறுவிய பிறகு நீங்கள் உருவாக்குவதே உண்மையான செலவாகும். ஒரு லேசான லைப்ரரி (lightweight library) முதல் நாளில் மலிவாகத் தோன்றும், ஆனால் இருபதாவது நாளில் உங்களுக்கு ஒரு தேடல் பட்டி (search bar) தேவை என்பதை உணரும்போது அது விலை உயர்ந்ததாக மாறும். நீங்களாகவே உருவாக்குவது (DIY path) முதல் நாளில் இலவசமாகத் தோன்றும், ஆனால் அறுபதாவது நாளில் நீங்கள் இன்னும் மொபைல் டச் டார்கெட்டுகள் (mobile touch targets) மற்றும் பிரிண்ட் ஸ்டைல்ஷீட்களை (print stylesheets) சரிசெய்து கொண்டிருக்கும்போது அது விலை உயர்ந்ததாக மாறும். வணிக ரீதியான வழி ஆரம்பத்தில் பணத்தை கோருகிறது, ஆனால் அது உங்கள் உண்மையான வணிக தர்க்கத்திற்காக (business logic) நீங்கள் செலவிடக்கூடிய வாரக்கணக்கில் பொறியியல் நேரத்தைச் சேமிக்கும்.
அதன் README சுருக்கமாகவும் எளிமையாகவும் இருப்பதால் ஒரு லைப்ரரியைத் தேர்ந்தெடுக்காதீர்கள். உங்கள் திட்டத் தேவைகளின் (project requirements) அடிப்படையில் தேர்ந்தெடுங்கள். தம்ப்நெயில்களின் (thumbnails) சைட்பார், உரைத் தேடல் மற்றும் கிளையண்ட்-சைடு குறிப்புகள் (client-side annotations) ஆகியவை ஒரு முழுமையான சேவைத் தீர்வை நோக்கி உங்களை வழிநடத்தும். ஒரு உள்முக டேஷ்போர்டிற்குள் (internal dashboard) விரைவான ரசீது முன்னோட்டம் (receipt preview) தேவைப்பட்டால், அது ஒரு லேசான எம்பெட் (lightweight embed) தீர்வை நோக்கி உங்களை வழிநடத்தும்.
உண்மையான முடிவு
நீங்கள் எந்தவொரு Vue PDF லைப்ரரியையும் தேர்ந்தெடுப்பதற்கு முன், உங்கள் பயனர்கள் சரியாக என்ன செய்ய வேண்டும் என்பதை எழுதி வையுங்கள். அவர்கள் குறுகிய ஆவணங்களை வெறும் ஸ்க்ரோல் செய்ய மட்டுமே விரும்பினால், vue-pdf-embed போதுமானதாக இருக்கும். அவர்கள் ஒரு கட்டுப்படுத்தப்பட்ட பணிப்பாய்வில் (controlled workflow) பக்கங்களை ஒவ்வொன்றாகப் பார்க்க விரும்பினால், @tato30/vue-pdf ஐப் பயன்படுத்துங்கள். ஒரு முக்கியமான வணிகச் செயலியில் (business-critical app) அவர்கள் குறிப்பு எடுக்கவும், தேடவும் மற்றும் அச்சிடவும் விரும்பினால், வணிக ரீதியான வியூயரை (commercial viewer) வாங்குங்கள். உங்கள் தேவைகள் முற்றிலும் தனித்துவமானவை ஆனால் உங்கள் காலக்கெடு நெகிழ்வானது என்றால், சில வாரங்களை ஒதுக்கி நேரடியாக PDF.js மூலம் உருவாக்குங்கள். ஒரு PDF வியூவர் என்பது வெறும் ஒரு கோப்பு மட்டுமல்ல. அது ஒரு முழுமையான ஆவண இடைமுகம் (document interface), மேலும் நீங்கள் தேர்ந்தெடுக்கும் கட்டுமானக் கூறு (building block) நீங்கள் இந்த மாதத்தில் வெளியிடுவீர்களா அல்லது அடுத்த காலாண்டத்தில் வெளியிடுவீர்களா என்பதைத் தீர்மானிக்கும்.