Developers consistently underestimate PDF viewers. It looks like a simple file in a box problem. You fetch the bytes, po

ડેવલપર્સ સતત PDF વ્યુઅર્સને ઓછાં આંકતા હોય છે. તે એક સરળ 'ફાઇલ-ઇન-એ-બોક્સ' સમસ્યા જેવું લાગે છે. તમે બાઇટ્સ ફેચ કરો છો, કોઈ કમ્પોનન્ટને URL પર પોઇન્ટ કરો છો, અને કામ પૂરું સમજી લો છો. Vue.js મોટાભાગના UI કામને આટલું સરળ બનાવે છે, છતાં પ્રોડક્શન-રેડી PDF વ્યુઅર એવા ફીચર્સમાંનું એક છે જે શાંતિથી આખા સ્પ્રિન્ટ્સ (sprints) ખાઈ જાય છે. મેં બે અઠવાડિયામાં ચાર અલગ અલગ રીતે એ જ વ્યુઅર બનાવ્યો. દરેક પ્રયાસે એક જ વાત સાબિત કરી: તમે સોમવારે જે લાઇબ્રેરી પસંદ કરો છો તે નક્કી કરે છે કે બે મહિના પછી તમે કયા બગ્સ (bugs) ફિક્સ કરવા પડશે.

જૂના થઈ ગયેલા ટ્યુટોરિયલનો જાળ

મોટાભાગની માર્ગદર્શિકાઓ હજુ પણ એવી લાઇબ્રેરીઓની ભલામણ કરે છે જે છેલ્લે ત્યારે અપડેટ થઈ હતી જ્યારે Vue 2 ડિફોલ્ટ હતું. એક ડેવલપર README ઝડપથી વાંચે છે, ઇન્સ્ટોલ કમાન્ડ ચલાવે છે, અને માની લે છે કે અઘરો ભાગ પૂરો થઈ ગયો છે. વાસ્તવમાં, અઘરો ભાગ તો હજુ શરૂ જ થયો છે. તમારે સર્ચની જરૂર પડશે. બ્રાઉઝર ટેબ ક્રેશ થયા વગર તમારે 400-પેજનું પોલિસી ડોક્યુમેન્ટ હેન્ડલ કરવું પડશે. મોબાઈલ પર કોઈ પૂછશે કે pinch-to-zoom કેમ બગડેલું લાગે છે. README માં ભાગ્યે જ આમાંથી કોઈ બાબત વિશે ચેતવણી આપવામાં આવે છે કારણ કે ડેમો માત્ર પાંચ પેજના એક એકેડેમિક પેપરનું પ્રથમ પેજ જ રેન્ડર કરે છે.

ચાર અભિગમો

Vue માટે કોઈ એક શ્રેષ્ઠ PDF લાઇબ્રેરી નથી. તમારા યુઝર્સ ખરેખર શું કરવાનો પ્રયાસ કરી રહ્યા છે તેના માટે માત્ર શ્રેષ્ઠ સુસંગતતા (fit) જ હોય છે.

PDF.js: DIY માર્ગ

Mozilla નું PDF.js લગભગ દરેક વેબ-આધારિત વ્યુઅરની નીચેનું એન્જિન છે. તેને Vue 3 એપમાં ઉમેરવાનો અર્થ કમ્પોનન્ટ ઇન્સ્ટોલ કરવાનો નથી; તેનો અર્થ એક પ્રોજેક્ટ અપનાવવાનો છે. તમે getDocument સાથે ડોક્યુમેન્ટ ફેચ કરો છો, દરેક પેજને <canvas> એલિમેન્ટ પર રેન્ડર કરો છો, અને તે કેનવાસને તમારા ટેમ્પલેટમાં જોડો છો. પહેલા દિવસે, તમને લાગે છે કે તમે ઉત્પાદક છો. ત્રીજા દિવસ સુધીમાં, તમે Vite બંડલિંગ અને CORS હેડર્સ સાથે યોગ્ય રીતે કામ કરવા માટે વર્કર સ્ક્રિપ્ટને કોન્ફિગર કરી રહ્યા છો.

નેટિવ બ્રાઉઝર સ્ક્રોલ દસ પેજ માટે બરાબર કામ કરે છે. હજાર પેજ પર તે અટકી જાય છે, તેથી તમે વર્ચ્યુઅલ સ્ક્રોલિંગ બનાવો છો. પછી તમે નોંધશો કે ટેક્સ્ટ સિલેક્ટ કરી શકાતું નથી, તેથી તમે દરેક કેનવાસની ઉપર પારદર્શક ટેક્સ્ટ div ઓવરલે કરો છો. પ્રિન્ટિંગ ઝાંખું દેખાય છે, તેથી તમે DPI સેટિંગ્સ અને મીડિયા ક્વેરીઝ પાછળ દોડો છો. મોબાઈલ pinch-to-zoom બ્રાઉઝરના નેટિવ જેસ્ચર હેન્ડલિંગ સાથે અથડાય છે. ક્રોસ-ડોક્યુમેન્ટ સર્ચ એટલે દરેક પેજમાંથી ટેક્સ્ટને અસિંક્રોનસલી (asynchronously) એક્સટ્રેક્ટ અને ઇન્ડેક્સ કરવું, અને પછી મેઈન થ્રેડને બ્લોક કર્યા વગર પરિણામોને ક્યુ (queue) કરે તેવું UI બનાવવું. Cursor જેવા AI કોડિંગ આસિસ્ટન્ટ દ્વારા બોઈલરપ્લેટ (boilerplate) જનરેટ કરવા છતાં, આર્કિટેક્ચરની જવાબદારી તમારી જ રહે છે. અઘરા ભાગો ગાયબ નથી થતા; તેઓ તમારા કોડબેઝમાં સ્થળાંતરિત થાય છે. આ માર્ગ ત્યારે જ યોગ્ય છે જ્યારે તમારી જરૂરિયાતો ખરેખર મર્યાદિત હોય, અથવા જ્યારે તમારી પાસે કેટલાક અઠવાડિયા ખાલી હોય અને તૈયાર ઉપલબ્ધ (off-the-shelf) વર્તકાવવાનું ટાળવા માટે કોઈ મજબૂત કારણ હોય.

vue-pdf-embed: હળવો માર્ગ

ક્યારેક તમારે ફક્ત ફાઇલ બતાવવાની જ જરૂર હોય છે. vue-pdf-embed એ એક Vue 3 કમ્પોનન્ટ છે જે સોર્સ સ્વીકારે છે અને પેજને વર્ટિકલ સ્ટેકમાં રેન્ડર કરે છે. ઇન્સ્ટોલેશન અને ઇન્ટિગ્રેશન મિનિટોમાં થઈ જાય છે. જનરેટ કરેલા ઇન્વોઇસ અથવા કમ્પ્લાયન્સ રિપોર્ટ્સ દર્શાવતા ઇન્ટરનલ એડમિન પેનલ માટે, આ ઘણીવાર પૂરતું હોય છે. કમ્પોનન્ટ કેનવાસ રેન્ડરિંગ હેન્ડલ કરે છે, અને તમારા યુઝર્સ સ્ક્રોલ કરી શકે છે.

તેની સામે તમારે અન્ય બધું જ ગુમાવવું પડે છે. તેમાં કોઈ ટૂલબાર નથી, ડોક્યુમેન્ટ સર્ચ નથી, થંબનેલ સાઇડબાર નથી, અને સ્ક્રોલ કન્ટેનરમાંથી આગળ-પાછળ જવા સિવાય કોઈ પેજ નેવિગેશન નથી. જે ક્ષણે કોઈ સ્ટેકહોલ્ડર પૂછે છે, "શું હું ઇન્વોઇસ નંબર શોધી શકું?" તમારી બે કલાકની ઇન્ટિગ્રેશન એક કસ્ટમ બિલ્ડમાં ફાટી નીકળે છે. જ્યારે તમારા PDF ટૂંકા હોય, તમારો ઓડિયન્સ ઇન્ટરનલ હોય અને ઇન્ટરેક્શન મોડલ ફક્ત રીડ-ઓન્લી સ્ક્રોલિંગ હોય ત્યારે આ પસંદ કરો.

@tato30/vue-pdf: કંટ્રોલ માર્ગ

આ લાઇબ્રેરી મોનોલિથિક કમ્પોનન્ટમાંથી કમ્પોઝેબલ (composable) માં બદલાય છે. તે usePDF એક્સપોઝ કરે છે, જેને તમે તમારા setup બ્લોકની અંદર કોલ કરો છો. આખું સ્ક્રોલ કરી શકાય તેવું ડોક્યુમેન્ટ રેન્ડર કરવાને બદલે, તમે રિએક્ટિવ રેફ્સ (reactive refs) દ્વારા એક સમયે એક પેજ મેનેજ કરો છો. તે વધારાનું કામ લાગે છે, પરંતુ જ્યારે ઇન્ટરફેસ ચોકસાઈની માંગ કરે છે ત્યારે તે મુક્તિ આપનારું છે.

એક ઇન્શ્યોરન્સ ક્લેમ રિવ્યુ ટૂલની કલ્પના કરો જ્યાં એડજસ્ટર્સ એક ડોક્યુમેન્ટ પેજ વેરિફાય કરે છે, 'Next' પર ક્લિક કરે છે, અને સિસ્ટમ દરેક વ્યુઇંગ ઇવેન્ટ લોગ કરે છે. અહીં સતત સ્ક્રોલ કરી શકાય તેવું વ્યુઅર ખોટું ઉદાહરણ (metaphor) હશે. તમારે કંટ્રોલ્ડ પેજીનેટર જોઈએ છે, કદાચ પેજ-લેવલ કોમેન્ટિંગ અથવા સીધા વર્તમાન પેજ ઇન્ડેક્સ સાથે જોડાયેલા એપ્રુવલ બટન્સ સાથે. કારણ કે usePDF તમને પેજ કાઉન્ટ અને વર્તમાન પેજ રિએક્ટિવ ડેટા તરીકે આપે છે, તેને કસ્ટમ નેવિગેશન બાર અથવા પ્રોગ્રેસ ઇન્ડિકેટર સાથે જોડવું કુદરતી લાગે છે. તમે હજુ પણ કેનવાસની આસપાસનું 'ક્રોમ' (UI elements) બનાવો છો, પરંતુ તમે લો-લેવલ રેન્ડરિંગ બોઈલરપ્લેટથી બચી જાઓ છો. આ એવા એપ્સ માટે યોગ્ય છે જ્યાં યુઝર્સ આખું હસ્તપ્રત (manuscript) સ્કેન કરવાને બદલે એક પછી એક પેજ પર આગળ વધે છે.

Vue PDF Viewer: ફૂલ-સર્વિસ માર્ગ

એક એવો સમય આવે છે જ્યારે વ્યુઅર ફીચર્સને ફરીથી બનાવવું એ તમારા વાસ્તવિક પ્રોડક્ટથી ધ્યાન ભટકાવનારું બની જાય છે. Vue PDF Viewer એ એક કોમર્શિયલ કમ્પોનન્ટ છે જે ફૂલ ટૂલબાર, ટેક્સ્ટ સર્ચ, એનોટેશન, મોબાઈલ રિસ્પોન્સિવનેસ અને વર્ચ્યુઅલ સ્ક્રોલિંગ સાથે આવે છે, જે તમામ એજ કેસિસમાં પહેલેથી જ ટેસ્ટ કરેલા છે. તમારું કામ શોધ કરવાને બદલે કોન્ફિગરેશન કરવાનું બની જાય છે. તમે તમારા ડિઝાઇન સિસ્ટમ સાથે મેળ ખાવા માટે થીમ એડજસ્ટ કરો છો, તમને જરૂરી ફીચર્સને ટોગલ કરો છો, અને એ કામ પર આગળ વધો છો જે ખરેખર તમારા એપને અલગ પાડે છે.

શરૂઆતની લાયસન્સ ફી ખરેખર છે, પરંતુ સર્ચ ઇન્ડેક્સિંગ અને એનોટેશન લેયર્સને ફરીથી બનાવવા માટે ખર્ચાયેલા એન્જિનિયરિંગના બે અઠવાડિયાનો સમય પણ એટલો જ મોંઘો છે. જ્યારે તમે વાસ્તવિક ડેડલાઇન હેઠળ પ્રોડક્શન એપ લોન્ચ કરી રહ્યા હોવ અને તમારા વપરાશકર્તાઓ ડેસ્કટોપ PDF સોફ્ટવેર જેવો અનુભવ અપેક્ષા રાખતા હોય, ત્યારે આ સાચું સાધન છે.

ઇન્સ્ટોલેશનની વાસ્તવિક કિંમત શું છે

સૌથી મોટી ભૂલ npm install કમાન્ડને કુલ કિંમત માનવી એ છે. વાસ્તવિક કિંમત એ છે જે તમે ઇન્સ્ટોલેશન પૂરું થયા પછી બનાવો છો. એક લાઇટવેઇટ લાઇબ્રેરી પહેલા દિવસે સસ્તી હોય છે અને વીસમા દિવસે મોંઘી પડે છે જ્યારે તમને સમજાય છે કે તમારે સર્ચ બારની જરૂર છે. DIY (સ્વયં કરવા) નો રસ્તો પહેલા દિવસે મફત છે અને સાઠમા દિવસે મોંઘો પડે છે જ્યારે તમે હજુ પણ મોબાઈલ ટચ ટાર્ગેટ્સ અને પ્રિન્ટ સ્ટાઇલશીટ્સ ઠીક કરી રહ્યા હોવ. કોમર્શિયલ રસ્તો શરૂઆતમાં પૈસા માંગે છે, પરંતુ તે તમારા એન્જિનિયરિંગના અઠવાડિયાના સમયને બચાવી શકે છે જે તમે તમારા વાસ્તવિક બિઝનેસ લોજિક પર ખર્ચ કરી શકો છો.

ફક્ત એટલા માટે લાઇબ્રેરી પસંદ ન કરો કારણ કે તેનું README ટૂંકું અને મૈત્રીપૂર્ણ છે. તમારા પ્રોજેક્ટની જરૂરિયાતોના આધારે પસંદ કરો. થંબનેલ્સનું સાઇડબાર, ટેક્સ્ટ સર્ચ અને ક્લાયન્ટ-સાઇડ એનોટેશન તમને ફૂલ-સર્વિસ સોલ્યુશન તરફ દોરી જાય છે. ઇન્ટરનલ ડેશબોર્ડની અંદર ઝડપી રસીદ પ્રિવ્યૂ તમને લાઇટવેઇટ એમ્બેડ તરફ દોરી જાય છે.

મુખ્ય નિષ્કર્ષ

કોઈપણ Vue PDF લાઇબ્રેરી પસંદ કરતા પહેલા, તમારા વપરાશકર્તાઓને ખરેખર શું કરવાની જરૂર છે તે લખી લો. જો તેમને ફક્ત ટૂંકા દસ્તાવેજો સ્ક્રોલ કરવાની જરૂર હોય, તો vue-pdf-embed તમારા માટે પૂરતું છે. જો તેઓ કંટ્રોલ્ડ વર્કફ્લોમાં પેજ દ્વારા આગળ વધતા હોય, તો @tato30/vue-pdf નો ઉપયોગ કરો. જો તેઓ વ્યવસાય માટે અત્યંત મહત્વપૂર્ણ એપમાં એનોટેટ, સર્ચ અને પ્રિન્ટ કરે છે, તો કોમર્શિયલ વ્યુઅર ખરીદો. અને જો તમારી જરૂરિયાતો ખરેખર અનન્ય હોય પરંતુ તમારી સમયમર્યાદા લવચીક હોય, તો અઠવાડિયા ફાળવો અને સીધું PDF.js પર બનાવો. PDF વ્યુઅર ક્યારેય માત્ર એક ફાઇલ નથી હોતી. તે એક સંપૂર્ણ ડોક્યુમેન્ટ ઇન્ટરફેસ છે, અને તમારા બિલ્ડિંગ બ્લોકની પસંદગી નક્કી કરશે કે તમે આ મહિને શિપ કરશો કે આગામી ક્વાર્ટરમાં.