Pdf.js: Can't change/jump to page

[RudmanMario]

I'm using this library with React to render the whole pdf document and also have the function to go to particular page. The strange thing is that I can't jump to page only when I'm rendering my whole document with new pdfjsViewer.PDFViewer , but when I'm using new pdfjsViewer.PDFSinglePageViewer for rendering just one page at the time I can normally jump to page and implement all other functions.

This is some of my code:

import * as pdfWorker from 'pdfjs-dist/build/pdf.worker'
import PdfJsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';

...

componentDidMount() {
        let container = this.viewerContainer.current;
        let viewer = this.viewer.current;

        PdfJsLib.GlobalWorkerOptions.workerSrc = pdfWorker;
        PdfJsLib.getDocument(this.props.file).then((pdf) => {

            this.setState({numPages: pdf.numPages});

            this.pdfLinkService = new pdfjsViewer.PDFLinkService();

            this.pdfFindController = new pdfjsViewer.PDFFindController({
                linkService: this.pdfLinkService,
            });

            this.pdfViewer = new pdfjsViewer.PDFViewer({
                 container,
                 viewer,
                 linkService: this.pdfLinkService,
                 findController: this.pdfFindController
            });
            this.pdfLinkService.setViewer(this.pdfViewer);

            this.pdfViewer.setDocument(pdf);
            this.pdfLinkService.setDocument(pdf, null);

            this.pdfViewer.onePageRendered.then(() => {
                 pdf.getOutline().then((outline) => {
                     this.outline = outline || null;

                     if (!outline) {
                        return;
                     }
                     this.setState({bookmarkItems: outline});
            });
       });
   });
}



...

onNextPageClick = () => {
    if(this.state.numPages > this.state.pageNumber) {
        this.setState({pageNumber: this.state.pageNumber + 1});
        this.setState({pageNumberInput: this.state.pageNumber + 1});

        this.pdfViewer.currentPageNumber++;
    }
}
onPreviousPageClick = () => {
    if(this.state.pageNumber > 1) {
        this.setState({pageNumber: this.state.pageNumber - 1});
        this.setState({pageNumberInput: this.state.pageNumber - 1});

        this.pdfViewer.currentPageNumber--;
    }
}

...

render() {
    return(

        ...

        <div className="splitToolbarButton hiddenSmallView">
            <button className="toolbarButton pageUp" title="Previous Page" id="previous" tabIndex="13" data-l10n-id="previous" onClick={this.onPreviousPageClick}>
            <span data-l10n-id="previous_label">Previous</span>
            </button>
         <div className="splitToolbarButtonSeparator" />
            <button className="toolbarButton pageDown" title="Next Page" id="next" tabIndex="14" data-l10n-id="next" onClick={this.onNextPageClick}>
             <span data-l10n-id="next_label">Next</span>
            </button>
        </div>

         ...

        <div id="viewerContainer" ref={this.viewerContainer}>
            <div id="viewer" ref={this.viewer} className="pdfViewer" />
        </div>
    )
}

Is there anything that I'm doing wrong here or am I missing something?

Configuration:

• Web browser and its version: Chrome 71.0.3578.98
• Operating system and its version: Windows 10
• PDF.js version: 2.0.489

[timvandermeij]

From the description it's not clear what you mean by "jumping to a page". If you mean changing the page, you can use the PDFViewer.currentPageNumber setter (https://github.com/mozilla/pdf.js/blob/master/web/base_viewer.js#L207). Moreover, as outlined in https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md, just code snippets won't help to debug the issue:

If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us on the IRC channel -- keep in mind that just code snippets won't help us troubleshoot the problem.

Closing as answered unless more information is provided.

[RudmanMario]

Thank you for responding. Sorry if I wasn't clear enough, when I wrote "jumping to a page" I meant changing the page or to be more precise scrolling to the page. So when I'm using PDFSinglePageViewer I can change page normally but when I'm using PDFViewer nothing happens when setting currentPageNumber (all the other code is identical with the one using PDFSinglePageViewer). Is there anything special that needs to be implemented for changing the page using PDFViewer in comparison with PDFSinglePageViewer?

[timvandermeij]

Not that I'm aware of. Try the examples from https://github.com/mozilla/pdf.js/tree/master/examples without React to see if perhaps the combination with React is breaking something.

[RudmanMario]

I found where my problem was. I wasn't aware that div element with id viewerContainer has to have position: absolute so that scrollIntoView actually do something. The same goes for the div element mainContainer. Of course it make sense now but I was looking at the wrong places all the time thinking it has to do something with react or services like PDFLinkService. @timvandermeij Thank you for the help.

[dsarkar99]

// Check for pages to
const gotopage = () => {
    const x=document.getElementById('page-to').value.trim();
      if (x >= pdfDoc.numPages) {
    return;
  }
    pageNum=x;
    queueRenderPage(parseInt(pageNum));
};

USE : parseInt(pass the page number);
Its working...

[christiaankreeftmeijer]

I found where my problem was. I wasn't aware that div element with id viewerContainer has to have position: absolute so that scrollIntoView actually do something. The same goes for the div element mainContainer. Of course it make sense now but I was looking at the wrong places all the time thinking it has to do something with react or services like PDFLinkService. @timvandermeij Thank you for the help.

I am having the same problem but I am not sure how you fixed it. I tried your fix and added the absolute positioning but to no avail. Any other tips you have after debugging?