Webviewer pageNavOverlay customization

Technical Support WebViewer
1

I am currently replacing the current PDF viewer in our webviewer application with PDFTron WebViewer 7.x. Initial goal is to replace the viewer with preservation of the current functionality as much as possible.

The current PDF viewer has an option to jump to the first, last and a specific page number.
Is it possible to change the pageNavOverlay in such a way or to add these to the Headeritems ?
I only documentation how to add custom buttons to the headeritems, but no form fields.

Is it possible in any way?

Cheers,
Peter

2

Hi Peter,

Thanks for reaching out!

You are able to add a button to the header and then inside of the onClick pass set the current page to either 1 or getPageCount.

    WebViewer(...)
  .then(instance => {
    instance.setHeaderItems(header => {
      header.push({
        type: 'actionButton',
        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
        onClick: () => {
          instance.docViewer.setCurrentPage(1);
        }
      });
    });
  });

https://www.pdftron.com/api/web/CoreControls.DocumentViewer.html#setCurrentPage__anchor
https://www.pdftron.com/api/web/CoreControls.DocumentViewer.html#getPageCount__anchor

Currently, we are unable to pass form fields or input fields to the header. So I would recommend using a combination of the two. We are hoping to improve the APIs in 8.0 release.

Alternatively, you can create your own HTML elements that would call out relevant APIs outside of WebViewer.

3

Hi Andrey,

Great! That helped me out with the skip to first and last page buttons. We will wait for release 8 for the expansion of the header functions.

image

I little note about using the img key when pushing actionButton objects to the header.

When an img path is specified it should always be specified relative to the WebViewer assets/icons/ folder. e.g. you need to specify a path to a file in your projects path using ../../assets/myicon.svg
Actionbutton images specified with a path are also not wrapped in a div with class Icon, so the styling deviates from the generic PDFTron styling.

## Actionbutton with embedded svg
<button class="Button ActionButton" aria-label="Naar eersta pagina">
	<div class="Icon "><svg xmlns="http://www.w3.org/2000/svg" ...</svg>
	</div>
</button>

## Actionbutton with image path to svg
<button class="Button ActionButton" aria-label="Naar laatste pagina">
	<img src="../../fast-forward.svg">
</button>

Svg-icons which are groups and not paths will deviate from the default PDFtron styling. The orignal (svg-)icons color will be used and not the --icon-color css style.
So icons should always be ungrouped and converted to a path. Easiest and free way to do this is in Inscape, then minify is using SVGO.

4

Thanks for the note about img key, I have forwarded the feedback internally to the team.

Let me know if you have any other questions!