Process currently rendered pages

Q: I’d like to set CSS styles, attributes or content in all the pages for some specific DOM elements.

A: 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.