enoviq-react-document-viewer
Version:
Custom React & Next.js compatible document viewer package
3 lines (2 loc) • 2.31 kB
JavaScript
import{useRef as e,useState as t,useEffect as r}from"react";import{GlobalWorkerOptions as n,getDocument as a}from"pdfjs-dist/build/pdf";import*as o from"pdfjs-dist/build/pdf.worker.min";function i({file:n,base64String:o}){const i=e(null),s=e(1),[c,d]=t(0),[l,p]=t(1),[f,u]=t(null);r(()=>{if(!n&&!o)return;let e;return n?(e=URL.createObjectURL(n),u(e)):o&&u(`data:application/pdf;base64,${o}`),()=>{e&&URL.revokeObjectURL(e)}},[n,o]),r(()=>{if(!f||!i.current)return;let e=!1;return(async()=>{try{let t;if(i.current.innerHTML="",n){const e=await n.arrayBuffer();t=a({data:new Uint8Array(e)})}else{const e=o.replace(/^data:.*;base64,/,""),r=atob(e),n=new Uint8Array(r.length);for(let e=0;e<r.length;e++)n[e]=r.charCodeAt(e);t=a({data:n})}const r=await t.promise;if(e)return;d(r.numPages);for(let e=1;e<=r.numPages;e++){const t=await r.getPage(e),n=t.getViewport({scale:1.5}),a=document.createElement("canvas");a.className=`pdf-page pdf-page-${e}`,a.dataset.page=e,a.width=n.width,a.height=n.height,a.style.display="block",a.style.marginBottom="10px",i.current.appendChild(a);const o=a.getContext("2d");await t.render({canvasContext:o,viewport:n}).promise}}catch(e){console.error("PDF rendering error:",e)}})(),()=>{e=!0,i.current&&(i.current.innerHTML="")}},[f,n,o]);const g=e=>{const t=document.querySelector(`.pdf-page-${e}`);t&&t.scrollIntoView({behavior:"smooth"})};return h("div",{style:{width:"100%",textAlign:"center",maxWidth:"95%",margin:"auto"}},h("div",{ref:i,onScroll:()=>{const e=i.current;if(!e)return;const t=e.querySelectorAll(".pdf-page");let r=s.current;for(let e of t){const t=e.getBoundingClientRect();if(t.top>=0&&t.top<=.5*window.innerHeight){r=parseInt(e.dataset.page,10);break}}r!==s.current&&(s.current=r,p(r))},style:{width:"100%",height:"65vh",overflowY:"scroll",border:"1px solid #ddd",background:"#f9f9f9"}}),h("div",{style:{marginTop:"10px",display:"flex",alignItems:"center",justifyContent:"center"}},h("button",{onClick:()=>g(Math.max(l-1,1)),disabled:1===l,className:"btn text-white add_btn"},"Prev"),h("span",{style:{margin:"0 10px"}},"Page ",l," of ",c),h("button",{onClick:()=>g(Math.min(l+1,c)),disabled:l===c,className:"btn sub_btn"},"Next")))}"undefined"!=typeof window&&void 0===n.workerSrc&&(n.workerSrc=o);export{i as default};
//# sourceMappingURL=PDFViewer-88041b36.js.map