Scroll to specific page number is not working

Technical Support
,
1

Product:
PDF TRON
Product Version: 8.12.0

Please give a brief summary of your issue:
I want to scroll to a specific page number once the document is loaded

Please describe your issue and provide steps to reproduce it:

Below code works fine. I loaded a static file and jump to page 5

useEffect(() => {
(async function loadWebViewer() {
const WebViewer = (await import(‘@pdftron/webviewer’)).default;
if (viewer.current) {
WebViewer(
{
path: ‘/webviewer’,
autoExpandOutlines: false,
disabledElements: disabledUIElements,
},
viewer.current
).then(instance => {
inst.current = instance;
const { documentViewer } = instance.Core;

      instance.UI.loadDocument('/files/pdftron_about.pdf', { documentId: 'id2' });


      documentViewer?.addEventListener('documentLoaded', async () => {
        documentViewer?.setCurrentPage(5, true); // Goes to page 5 of the document
      });
    });
  }
})();

}, []);

But when I get the documents from an API call, the document scroll to page 5 it but jumps back to the first page. Below is the sample code

useEffect(() => {
(async function loadWebViewer() {
const WebViewer = (await import(‘@pdftron/webviewer’)).default;
if (viewer.current) {
WebViewer(
{
path: ‘/webviewer’,
autoExpandOutlines: false,
disabledElements: disabledUIElements,
},
viewer.current
).then(instance => {
inst.current = instance;
const { enableFeatures, disableFeatures, Feature } = instance.UI;
const { documentViewer } = instance.Core;

      disableFeatures([Feature.Annotations]);
      instance.UI.setHeaderItems(header => {
        addAnnotationToHeaderPanel(header, enableFeatures, disableFeatures, Feature);
      });
      instance.UI.loadDocument('/files/pdftron_about.pdf', { documentId: 'id2' });

      getDocument(
        licenseResponse => {
          if (isSuccess(documentURL)) {
            const uri = getContentURI(`${documentURL`);
            instance.UI.loadDocument(uri, { documentId: 'id2' });
          }
        },
        docId,
        'pdf'
      );

      documentViewer?.addEventListener('documentLoaded', async () => {
        documentViewer?.setCurrentPage(5, true); // Goes to page 5 of the document
      });
    });
  }
})();

}, []);

Please let me know if I am missing something
Please provide a link to a minimal sample where the issue is reproducible:

2

Hi @p.kk,

I was not able to reproduce this with the following code where I load a document via a URL:

Webviewer({
  path: '/lib',
  annotationUser: 'Elrond',
  enableFilePicker: true,
}, document.getElementById('viewer')).then(instance => {

  const { documentViewer, Annotations, annotationManager, Tools } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {
    documentViewer.setCurrentPage(5, true);
  });

  documentViewer.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/demo.pdf')
});

Are you able to test your code with the URL for this document?
https://pdftron.s3.amazonaws.com/downloads/pl/demo.pdf

Does this happen for all your documents or just a particular document? Is this happening for PDFs or office documents? If you can share a sample of a document loaded via URL where this issue happens we can look further into this.

Best Regards,

Armando Bollain
Software Developer
Apryse Software Inc.

3

Hi Armando,

Thanks for the response.
I tried your demo.pdf URL and it works fine. But when I try my document it does not work. I put in my public folder, but scroll to page is not working.
I am attaching you the document(anti-wear-properties.pdf) which I am trying. PFA

I tried like

instance.UI.loadDocument(‘/files/anti-wear-properties.pdf’, { documentId: ‘id2’ }); But did not work

Can you please try with the same PDF file and see if it works for you?
anti-wear-properties.pdf (255.7 KB)

Along with this, I want to update the query param(page) when I scroll to the pages. For eg, If scroll to page 7, need to update query param ?page=7. Is there any document viewer event to detect the page scroll?

4

Hello @p.kk,

This is a particular issue with the document and not WebViewer itself. The document has an embedded Open action; this is an action that is run when the document is opened. In this case it is sending the document to page 1, and this happens after your code to set the page. To override Open Actions you can add the following code:

  const { Actions, documentViewer } = instance;
  const onTriggered = Actions.GoTo.prototype.onTriggered;
  Actions.GoTo.prototype.onTriggered = function(target, event) {
    if (target === documentViewer.getDocument() && event.name === 'Open') {
      return;
    }

    onTriggered.apply(this, arguments);
  };

We also have a pageNumberUpdated event you can listen to.

Hopefully this helps!

Best Regards,

Armando Bollain
Software Developer
Apryse Software Inc.

5

Hi Armando,

It works perfectly now. Thanks for the support. I will let u know if anything comes up.

1 Like