Getting webviewer document and its elements

Technical Support
, , , ,
1

I’m integrating modular UI.

and i need to do lot of customization

1.how can i access DOM element like document.getElementById(“decreaseFont”) inside pdftron.

2. i also have some dynamic html with its own script tag and and css e.g.,

this is the html i am receiving from an api response and need to render on webviewer i am able to render this html but this scripts are not working.

<script>
   document.addEventListener("DOMContentLoaded", function () {{
            const image = document.getElementById("main_img");
            const zoomInBtn = document.querySelector(".zoom-plus");
            const zoomOutBtn = document.querySelector(".zoom-minus");
            const resetBtn = document.querySelector(".zoom-reset");

            let defaultWidth = image.clientWidth; // Store default width
            let currentWidth = defaultWidth;
            let minWidth = 50;

            zoomInBtn.addEventListener("click", () => {{
                currentWidth += 80; // Increase width by 80px
                image.style.width = currentWidth + "px";
            }});

            zoomOutBtn.addEventListener("click", () => {{
                if (currentWidth > defaultWidth) {{ // Prevent shrinking too much
                    currentWidth -= 80;
                    image.style.width = currentWidth + "px";
                }}
            }});

            resetBtn.addEventListener("click", () => {{
                currentWidth = defaultWidth; // Reset to default width
                image.style.width = currentWidth + "px";
            }});
        }});
  </script>
3

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.


You’re trying to access DOM elements and execute scripts within Apryse’s WebViewer, which uses an iframe to encapsulate the viewer. This encapsulation can make direct DOM manipulation and script execution challenging.

Some things you can try:

  • To access elements within the WebViewer iframe, use the WebViewer API methods, such as documentViewer, annotationManager, and others, instead of standard DOM methods like document.getElementById.

  • For executing dynamic HTML scripts, ensure that the scripts are properly injected and executed after the WebViewer’s DOM is fully loaded. Consider using WebViewer’s loadDocument or loaded event listeners.

  • For custom UI elements and interactions, use WebViewer’s built-in functions and event handlers to ensure compatibility with the viewer’s lifecycle and encapsulation.

  • When dealing with styles and modular UI, leverage the Modular UI customization options to define and control your UI components effectively.



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.

4

Hello Prachi,

Thank you for contacting Apryse Forums.

  1. You can access elements in WebViewer web component mode like the following:
const ele = document.getElementById('wc-viewer').shadowRoot.querySelector('[data-element="annotationEditToolButton"]');

Web component is the default in version 11. If you have switched back to iframe, you can access elements like this: Running WebViewer as a Web Component | Apryse documentation

  1. To change styles in WebViewer, it may be easier to modify them in a separate css file: Change Themes & Colors in JavaScript PDF Viewer | Apryse documentation

Best Regards,

Darian

1 Like