Process the Currently Rendered Pages

You may want to set CSS styles, attributes, or content for some specific DOM elements contained on the pages.

For performance reasons, PSPDFKit for Web only renders a small number of pages at the same time. Therefore, if you want to make changes to the page DOM tree, you have to do it once that specific page is present in the DOM.

One way of achieving this is to listen to the "viewState.currentPageIndex.change" event and make your DOM changes there:

PSPDFKit.load(configuration).then((instance) => {
  function setPageBorders() {
    const pageElements = Array.from(
      instance.contentDocument.querySelectorAll(".PSPDFKit-Page")
    );
    // Set a red border for all pages.
    pageElements.forEach(function (pageElement) {
      pageElement.style.borderWidth = "3px";
      pageElement.style.borderStyle = "solid";
      pageElement.style.borderColor = "red";
    });
  }
  // The listener will get called whenever the current page changes.
  instance.addEventListener(
    "viewState.currentPageIndex.change",
    setPageBorders
  );
  // Initialization.
  // Wait for annotations to be loaded to ensure the page elements are already rendered.
  instance.addEventListener("annotations.load", setPageBorders);
});

This has been tested with PSPDFKit for Web 2020.5.1.