Page navigation + Zoom

[AndTmf]

Hello I am working on the code and I am very excited. It's really well done and documented.

I'm looking into the question of how to implement page navigation. My understanding is that there should be another PdfHighlighterUtil with something like current page, new page and previous and jump to page. Or is it perhaps more practical to address the pdfViewer directly for this?

Another problem is that the zoom via plus and minus is only applied when I switch or reload the pdf. I use next.js, but I have turned off Server Side Rendering (SSR). Even if I copy the code 1:1 as in the example, it does not work. If anyone has a tip on where to look, it would be great.

I can only thank you for the great repository and the work. My React and Typescript skills are not that advanced, otherwise I would also contribute one or the other function such as the page navigation, which seems to exceed my skillset at the moment.

Many thanks and best regards And

[AndTmf]

I found out by trial and error that the lack of "ExpandableTip" in my implementation prevented me from changing the zoom level of the document. I don't quite understand why yet, need to investigate further.

I hope this helps if anyone has similar problems

[aldwnesx]

Are you able to share basic set up with Nextjs? I am unable to get this library working, would appreciate your help with this

[aldwnesx]

Getting

 Compiled in 51ms (322 modules)
ReferenceError: window is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:454:3)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:453:26)
    at (ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs (/Users/al/Documents/GitHub/test/test/.next/server/vendor-chunks/pdfjs-dist.js:40:1)
    at Function.__webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at async eval (webpack-internal:///(ssr)/./node_modules/react-pdf-highlighter-extended/dist/esm/components/PdfHighlighter.js:38:19)
ReferenceError: document is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:456:18)
    at (ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs (/Users/al/Documents/GitHub/test/test/.next/server/vendor-chunks/pdfjs-dist.js:40:1)
    at Function.__webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at async eval (webpack-internal:///(ssr)/./node_modules/react-pdf-highlighter-extended/dist/esm/components/PdfHighlighter.js:38:19)
 ⨯ unhandledRejection: ReferenceError: window is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:454:3)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:453:26)
    at (ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs (/Users/al/Documents/GitHub/test/test/.next/server/vendor-chunks/pdfjs-dist.js:40:1)
    at Function.__webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at async eval (webpack-internal:///(ssr)/./node_modules/react-pdf-highlighter-extended/dist/esm/components/PdfHighlighter.js:38:19)
 ⨯ unhandledRejection: ReferenceError: window is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:454:3)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:453:26)
    at (ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs (/Users/al/Documents/GitHub/test/test/.next/server/vendor-chunks/pdfjs-dist.js:40:1)
    at Function.__webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at async eval (webpack-internal:///(ssr)/./node_modules/react-pdf-highlighter-extended/dist/esm/components/PdfHighlighter.js:38:19)
 ⨯ unhandledRejection: ReferenceError: document is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:456:18)
    at (ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs (/Users/al/Documents/GitHub/test/test/.next/server/vendor-chunks/pdfjs-dist.js:40:1)
    at Function.__webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at async eval (webpack-internal:///(ssr)/./node_modules/react-pdf-highlighter-extended/dist/esm/components/PdfHighlighter.js:38:19)
 ⨯ unhandledRejection: ReferenceError: document is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs:456:18)
    at (ssr)/./node_modules/pdfjs-dist/web/pdf_viewer.mjs (/Users/al/Documents/GitHub/test/test/.next/server/vendor-chunks/pdfjs-dist.js:40:1)
    at Function.__webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at async eval (webpack-internal:///(ssr)/./node_modules/react-pdf-highlighter-extended/dist/esm/components/PdfHighlighter.js:38:19)
 ⨯ TypeError: Promise.withResolvers is not a function
    at __webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/ExpandableTip.tsx:11:88)
    at (ssr)/./src/components/ExpandableTip.tsx (/Users/al/Documents/GitHub/test/test/.next/server/app/doc/[docId]/page.js:195:1)
    at __webpack_require__ (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/doc/[docId]/page.tsx:16:83)
    at (ssr)/./src/app/doc/[docId]/page.tsx (/Users/al/Documents/GitHub/test/test/.next/server/app/doc/[docId]/page.js:162:1)
    at Object.__webpack_require__ [as require] (/Users/al/Documents/GitHub/test/test/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
digest: "1607032694"

[AndTmf]

I had the same errors. The server site rendering (SSR) of next.js is responsible for this. The pdf.js components are designed to run in the browser window. To solve this I loaded/imported my react components with the code for the pdf handling in the following way:

import dynamic from 'next/dynamic'

const PDFcomponent = dynamic(() => import('./FileWithPDFcode'), {
  ssr: false,
})

in the beginning i tried 'use client', but that didn't solve it.

[AndTmf]

I have solved the display of the page number for myself as follows:

const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);

const updatePageNumber = (pageNumber: number, totalPages: number) => {
      setCurrentPage(pageNumber);
      setTotalPages(totalPages);
    };

and inside the return with PdfHighlighter

                <PdfHighlighter
                  enableAreaSelection={(event) => event.altKey}
                  pdfDocument={pdfDocument}
                  onScrollAway={resetHash}
                  utilsRef={(_pdfHighlighterUtils) => {
                    highlighterUtilsRef.current = _pdfHighlighterUtils;
                    if (_pdfHighlighterUtils) {
                      const viewer = _pdfHighlighterUtils.getViewer();
                      if (viewer && viewer.eventBus) {

                        {/* Event listener for page changes */}

                        viewer.eventBus.on("pagechanging", (event: PageChangingEvent) => {
                          const pagesCount = viewer.pagesCount || 0;
                          updatePageNumber(event.pageNumber, pagesCount);
                        });

                         {/* Event listener for loading all pages when loading the PDF internally to display the entire pages */}
                        viewer.eventBus.on("pagesloaded", () => {
                          updatePageNumber(viewer.currentPageNumber, viewer.pagesCount);
                        });

                      }
                    }
                  }}

then it can be used as follows, for example Page {currentPage} of {totalPages}