How to Load Specific Initial Page in WebViewer (React)?

Technical Support WebViewer
,
1

WebViewer Version: 11.4.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Not sure
Is your issue related to annotations? No

Please give a brief summary of your issue:
Is there a way to load a specific page when loading the document instead of loading the first page?

Please describe your issue and provide steps to reproduce it:
I’m evaluating WebViewer for a React project and need to load a specific initial page (e.g., page 55) immediately when the document opens, bypassing the first page. This is critical for performance and user experience, as our use case involves large linearized PDFs where users must land directly on relevant content.

Key requirements:

  1. Initial page load: Avoid loading prior pages (e.g., page 1-54) first.
  2. Optimized rendering: Prioritize the target page and adjacent pages for linearized/partial loading

Could you kindly advise if this is achievable with WebViewer? A minimal React example would be incredibly helpful.

This functionality is a dealbreaker for our adoption decision, so your guidance is deeply appreciated.

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To load a specific initial page in WebViewer, you can use the loadDocument API with the initialDoc option and set the page parameter to the desired page number. This approach allows you to bypass the default behavior of starting on the first page and can be optimized for linearized PDFs.

Some things you can try:

  • Ensure that your PDF is linearized, which allows WebViewer to load specific pages without loading the entire document.

  • Use the loadDocument API and specify the page number you want to load initially using the initialDoc option.

  • Check if the document is being served with the correct headers to support range requests, which are necessary for partial loading.

  • In your React component, call the loadDocument method with the correct options when initializing WebViewer.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hi there,

You can set the page when you load the document via setCurrentPage API:
https://sdk.apryse.com/api/web/Core.DocumentViewer.html#setCurrentPage

i.e.

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

Best regards,
Kevin

2 Likes