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.